@extends('layouts.master')

@section('title')
Violation type
@endsection

@section('content')
<style>
    .table td {
        padding: 5px !important;
    }

</style>
<div class="main-container container-fluid">

    <!-- PAGE-HEADER Breadcrumbs-->

    <div class="page-header">
        <div>
            <h1 class="page-title">Violation type</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{url('/dashboard')}}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{url('/violation/list')}}">Violation list</a></li>
                <li class="breadcrumb-item active" aria-current="page">Violation type</li>
            </ol>
        </div>
        <button type="button" class="btn btn-buzono" data-bs-effect="effect-slide-in-right"
                data-bs-toggle="modal" href="#addViolation"> <span class="fe fe-plus fs-14"></span> Add violation
                type</button>
    </div>



    <!-- filters -->
    <div class="card">
        <div class="card-body px-3 py-2 pt-3">
            <div class="form-row align-items-center">
                <div class="col-8 col-lg-8 mb-1">
                    <label for="" class="fw-bold mb-1">Search by name:</label>
                    <input type="text" id="search" class="form-control" placeholder="search by name....">
                </div>
                <!-- <div class="col-6 col-lg-2 mb-1">
                    <label for="" class="fw-bold mb-1">Search by month:</label>
                    <select class="form-control form-select" name="expiry_month" id="filterMonth">
                        <option value="All" selected>All</option>
                        <option value="January">January</option>
                        <option value="Febuary">Febuary</option>
                        <option value="March">March</option>
                        <option value="April">April</option>
                        <option value="May">May</option>
                        <option value="June">June</option>
                        <option value="July">July</option>
                        <option value="August">August</option>
                        <option value="September">September</option>
                        <option value="October">October</option>
                        <option value="November">November</option>
                        <option value="December">December</option>
                    </select>
                </div>
                <div class="col-6 col-lg-2 mb-1">
                    <label for="" class="fw-bold mb-1">Search by year:</label>
                    <select class="form-control form-select" name="expiry_year" id="filterYear">
                        <option value="All" selected>All</option>
                        <option value="2022">2022</option>
                        <option value="2023">2023</option>
                        <option value="2024">2024</option>
                        <option value="2025">2025</option>
                        <option value="2026">2026</option>
                        <option value="2027">2027</option>
                        <option value="2028">2028</option>
                        <option value="2029">2029</option>
                        <option value="2030">2030</option>
                    </select>
                </div> -->
                <div class="col-12 col-lg-2 mb-1 ">
                    <label for="" class="mb-1"></label>

                    <button id="btnFilter" type="button" class="btn btn-buzono btn-block">Filter</button>
                </div>
                <div class="col-12 col-lg-2 mb-1 ">
                    <label for="" class="mb-1"></label>

                    <button id="btnReset" type="button" class="btn btn-outline-info btn-block">Reset</button>
                </div>
                
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-sm-12">
            <div class="card">
                <div class="card-body pt-4">
                    
                    <div id="divData" class="table-responsive" style="display: none">
                        <table class="table table-bordered text-nowrap mb-0" id="dataTable">
                            <thead class="border-top bg-light">
                                <tr>
                                    <th class="bg-transparent border-bottom-0 fw-bold" style="width: 10%;">
                                        ID</th>
                                    <th class="bg-transparent border-bottom-0 fw-bold">
                                        Name</th>
                                    <th class="bg-transparent border-bottom-0 fw-bold">
                                        Action</th>
                                </tr>
                            </thead>
                            <tbody id="tBody">

                            </tbody>
                        </table>
                    </div>
                    <div id="divLoader" class="text-center pt-5" style="height:300px;">
                        <span>
                            <i class="fe fe-spinner fa-spin"></i> Violation types are being loading.. It might take few
                            seconds.
                        </span>
                    </div>
                    <div class="row text-center" id="divNotFound" style="display:none">
                        <h6 class="mt-lg-5" style=""><i class="bx bx-window-close"></i> {{__('No Violation type Found')}} !
                        </h6>
                    </div>
                    <div class="col-lg-12 mt-3">
                        <div id="divPagination" class="text-center">
                            <ul id="content-pagination" class="pagination-sm justify-content-end" style="display:none;"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End row -->
    <!-- MODALs -->
    <div class="modal fade" id="addViolation">
        <div class="modal-dialog modal-dialog-centered text-center" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title fw-bold">Create violation type</h6><button aria-label="Close"
                        class="btn-close" data-bs-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form action="" id="add_violationtype">
                        @csrf
                        <div class="form-group">
                            <label class="form-label text-start fw-bold">Violation name: <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="name" required
                                placeholder="violation name">
                        </div>
                        <div>
                            <button type="submit" class="btn btn-buzono btnSubmit" id="btnSubmit"> <i
                                    class="fa fa-spinner fa-pulse" style="display: none;"></i>
                                Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="editViolation">
        <div class="modal-dialog modal-dialog-centered text-center" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title fw-bold">Edit violation</h6><button aria-label="Close" class="btn-close"
                        data-bs-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form action="" id="update_violationtype">
                        @csrf 
                        <input type="hidden" name="id" id="v_type_id" value="">

                        <div class="form-group">
                            <label class="form-label text-start fw-bold">Violation name: <span
                                    class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" 
                                placeholder="">
                        </div>
                        <div class="form-group">
                            <label class="form-label text-start fw-bold">Status: <span
                                    class="text-danger">*</span></label>
                            <select class="form-control form-select" name="status" id="status">
                                <option value="active">Active</option>
                                <option value="deactive">Deactive</option>
                            </select>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-buzono btnSubmit" id="btnSubmit"> <i
                                    class="fa fa-spinner fa-pulse" style="display: none;"></i>
                                Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section("bottom-script")
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
    $(document).ready(function (e) {
        
        // ////////////////////////////////////////////////////////////////////////

        var filterLength = 1;
        var total = 0;
        var filterName = $("#search").val();
        var contentPagination = $("#content-pagination");
        var contentNotFound = $("#divNotFound");
        var contentFound = $("#divData");
        var filterMonth = $("#filterMonth").val();
        var filterYear = $("#filterYear").val();

        function setFilters() {
            filterName = $("#search").val()
            filterMonth = $("#filterMonth").val();
            filterYear = $("#filterYear").val();

            filterLength = 10;
        }
        typeCount()

        function typeCount(){
            setFilters()
            
            contentPagination.twbsPagination('destroy');
            $.ajax({
                url: '/api/violationtype/count',
                type: "get",
                data:{
                    filterName: filterName,
                    filterLength: filterLength,
                    filterMonth: filterMonth,
                    filterYear: filterYear
                },
                dataType: "JSON",
                cache: false,
                beforeSend: function () {
                },
                complete: function () {
                },
                success: function (response) {
                    // console.log(response);
                    if (response["status"] == "success") {
                        total = response["data"];
                        initPagination(Math.ceil(total / filterLength));
                    }else if (response["status"] == "fail") {
                        $("#divNotFound").css('display','block')
                        $("#divLoader").css('display','none')
                        $("#divData").css('display','none')
                    }
                },
                error: function (error) {
                    // console.log(error);
                }
            });
        }

        function violationTypes(offset){
            setFilters()

            $("#tBody").html('');
            $("#divLoader").css('display','block')
            $("#divData").css('display','none')
            $("#divNotFound").css('display','none')
            $.ajax({
                url: '/api/violationtypes/',
                type: "get",
                data:{
                    filterName: filterName,
                    filterLength: filterLength,
                    filterMonth: filterMonth,
                    filterYear: filterYear,
                    offset:offset
                },
                dataType: "JSON",
                cache: false,
                beforeSend: function () {

                },
                complete: function () {

                },
                success: function (response) {
                    // console.log(response);
                    if (response["status"] == "fail") {
                        $("#divLoader").css('display','none')
                        $("#divData").css('display','none')
                        $("#content-pagination").css('display','none')
                        $("#divNotFound").css('display','block')
                    } else if (response["status"] == "success") {
                        $("#divNotFound").css('display','none')
                        $("#divLoader").css('display','none')
                        $("#tBody").append(response["rows"]);
                        $("#divData").css('display','block');
                        $("#content-pagination").css('display','flex')

                    }
                },
                error: function (error) {
                    // console.log(error);
                }
            });
        }

        function initPagination(totalPages) {
            if (totalPages > 0) {
                contentPagination.show();
                contentPagination.twbsPagination({
                    totalPages: totalPages,
                    visiblePages: 4,
                    onPageClick: function (event, page) {
                        violationTypes((page === 1 ? page - 1 : ((page - 1) * filterLength)), filterLength);
                    }
                });
            } else {
                contentPagination.hide();
                contentFound.hide();
                contentNotFound.show();
            }
        }


        $(document).on('keyup', '#search', function () {
            setFilters()
            typeCount()
        });
        $(document).on('click', '#btnFilter', function (e) {
            setFilters()
            typeCount()
        })


        $(document).on('click', '#btnReset', function (e) {
            $("#search").val('')
            $("#filterMonth").val('All')
            $("#filterYear").val('All')
            setFilters()
            typeCount()
        })



        // //////////////////////////////////////////////////////////////////////////
        $(document).on('click', '.btnDelete', function (e) {
            var id = $(this).attr('id')
            Swal.fire({
                    title: "Are you sure?",
                    text: "You will not be able to recover this violation type!",
                    type: "warning",
                    buttons: true,
                    confirmButtonColor: "#ff5e5e",
                    confirmButtonText: "Yes, delete it!",
                    closeOnConfirm: false,
                    dangerMode: true,
                    showCancelButton: true
                })
                .then((deleteThis) => {
                    if (deleteThis.isConfirmed) {
                        $.ajax({
                            url: '/api/delete/violationtype/' + id,
                            type: "delete",
                            dataType: "JSON",
                            success: function (response) {

                                if (response["status"] == "fail") {
                                    Swal.fire("Failed!",
                                        "Failed to delete Violation type.",
                                        "error");
                                } else if (response["status"] == "success") {
                                    Swal.fire("Deleted!",
                                        "Vioaltion type has been deleted.",
                                        "success");
                                        typeCount()

                                }
                            },
                            error: function (error) {
                                // console.log(error);
                            },
                            async: false
                        });
                    } else {
                        Swal.close();
                    }
                });
        });

        // add violation type
        $("#add_violationtype").on('submit', (function (e) {
            e.preventDefault();
            $.ajax({
                url: '/api/add/violationtype',
                type: "POST",
                data: new FormData(this),
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $(".fa-pulse").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $(".fa-pulse").css('display', 'none');
                },
                success: function (response) {
                    // console.log(response);
                    if (response["status"] == "fail") {
                        toastr.error('Failed', response["msg"])
                    } else if (response["status"] == "success") {
                        toastr.success('Success', response["msg"])
                        $("#addViolation").modal('hide');
                        typeCount()
                    }
                },
                error: function (error) {
                    // console.log(error);
                }
            });
        }));

        // edit violationtype
        $(document).on('click', '.btnEdit', function (e) {
            var vtype = $(this).attr('id');
            $.ajax({
                url: '/api/edit/violationtype',
                type: "GET",
                dataType: "JSON",
                data: {
                    vtype: vtype

                },
                success: function (response) {
                    // console.log(response);
                    if (response["status"] == "fail") {
                        // toastr.error('Failed', response["msg"])
                    } else if (response["status"] == "success") {
                        // toastr.success('Success', response["msg"])
                        $("#name").val(response["data"]["name"])
                        $("#status").val(response["data"]["status"])
                        $("#v_type_id").val(response["data"]["id"])
                    }
                },
                error: function (error) {
                    // console.log(error);
                },
                async: false
            });
        });

        // update violationtype
        $("#update_violationtype").on('submit', (function (e) {
            e.preventDefault();
            $.ajax({
                url: '/api/update/violationtype',
                type: "POST",
                data: new FormData(this),
                dataType: "JSON",
                processData: false,
                contentType: false,
                cache: false,
                beforeSend: function () {
                    $("#btnSubmit").attr('disabled', true);
                    $(".fa-pulse").css('display', 'inline-block');
                },
                complete: function () {
                    $("#btnSubmit").attr('disabled', false);
                    $(".fa-pulse").css('display', 'none');
                },
                success: function (response) {
                    // console.log(response);
                    if (response["status"] == "fail") {
                        toastr.error('Failed', response["msg"])
                    } else if (response["status"] == "success") {
                        toastr.success('Success', response["msg"])
                        // $("#update_user")[0].reset();
                        $("#editViolation").modal('hide');
                        typeCount()
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }));


    });

</script>

@endsection