@extends('template.app')

@section('meta')
@endsection

@section('title')
Account Approvals
@endsection

@section('styles')
<style>
     .highlight {
        background-color: #ffff99; /* Change to desired highlight color */
    }
    #data-table.dataTable tbody td {
        padding: 0px !important;
        height: 20px !important;
        line-height: 35px !important;
        font-size: 15px !important;
        text-align: center;
    }
    #data-table th {
        text-align: center;
    }
    .form-group .custom_color {
        background-color: lightgrey !important;
    }
</style>
@endsection

@section('content')
<!-- Flatpickr CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-7 align-self-center">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Account Approval</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('account_approval') }}" class="text-muted">Account Approval</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">List</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body" style="min-width:100% !important;">
                    <table class="table table-bordered data-table" id="data-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Name</th>
                                <th>Booking Date</th>
                                <th>Model</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                            <tr class="filterrow">
                                <th></th>
                                <th>
                                    <div class="search-box-container datatable-form-filter">
                                        <div class="form-group is-empty">
                                            <input type="text" name="customer_name" value="{{ request()->get('customer_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="1">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter">
                                        <div class="form-group is-empty">
                                            <input type="text" name="booking_date" value="{{ request()->get('booking_date', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="2">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter">
                                        <div class="form-group is-empty">
                                            <input type="text" name="car_model" value="{{ request()->get('car_model', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="3">
                                        </div>
                                    </div>
                                </th>
                                <th> <div class="search-box-container datatable-form-filter">
                                        <div class="form-group is-empty">
                                            <input type="text" name="status" value="{{ request()->get('status', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="3">
                                        </div>
                                    </div></th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="DescModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Import</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                    </div>
                    <form action="">
                        <div class="modal-body">

                            <input type="hidden" name="id" id="id" value="">
                            <input type="hidden" name="status" id="status" value="">
                            <label for="">Enter Your Reason</label>
                            <textarea placeholder="Please Enter Your Reason" class="form-control" name="reason" id="reason" cols="30" rows="10"></textarea>


                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default " onclick="status_reject(this);">Apply!</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- Modal -->
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script type="text/javascript">
    // var datatable;

    // $(document).ready(function() {
    //     if ($('#data-table').length > 0) {
    //         datatable = $('#data-table').DataTable({
    //             processing: true,
    //             serverSide: true,

    //             // "pageLength": 25,
    //             // "iDisplayLength": 25,
    //             "responsive": true,
    //             "aaSorting": [],
    //             // "order": [], //Initial no order.
    //             //     "aLengthMenu": [
    //             //     [5, 10, 25, 50, 100, -1],
    //             //     [5, 10, 25, 50, 100, "All"]
    //             // ],

    //             // "scrollX": true,
    //             // "scrollY": '',
    //             // "scrollCollapse": false,
    //             // scrollCollapse: true,

    //             // lengthChange: false,

    //             "ajax": {
    //                 "url": "{{ route('account_approval') }}",
    //                 "type": "POST",
    //                 "dataType": "json",
    //                 "data": {
    //                     _token: "{{csrf_token()}}"
    //                 }
    //             },
    //             "columnDefs": [{
    //                 //"targets": [0, 5], //first column / numbering column
    //                 "orderable": true, //set not orderable
    //             }, ],
    //             columns: [{
    //                     data: 'DT_RowIndex',
    //                     name: 'DT_RowIndex'
    //                 },
    //                 {
    //                     data: 'name',
    //                     name: 'name'
    //                 },
    //                 {
    //                     data: 'booking_date',
    //                     name: 'booking_date'
    //                 },
    //                 {
    //                     data: 'product',
    //                     name: 'product'
    //                 },
    //                 {
    //                     data: 'status',
    //                     name: 'status'
    //                 },
    //                 {
    //                     data: 'action',
    //                     name: 'action',
    //                     orderable: false,
    //                 },
    //             ]
    //         });
    //     }
    //     // Highlight row on mouseover
    //         $('#data-table tbody').on('mouseover', 'tr', function() {
    //             $(this).addClass('highlight');
    //         });

    //         // Remove highlight on mouseout
    //         $('#data-table tbody').on('mouseout', 'tr', function() {
    //             $(this).removeClass('highlight');
    //         });
    // });

    window.change_status = function(object) {
        var id = $(object).data("id");
        var status = $(object).data("status");

        if (confirm('Are you sure?')) {
            $.ajax({
                "url": "{!! route('account_approval.change.status') !!}",
                "dataType": "json",
                "type": "POST",
                "data": {
                    id: id,
                    status: status,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.code == 200) {
                        datatable.ajax.reload();
                        toastr.success('Status changed successfully', 'Success');
                    } else {
                        toastr.error('Failed to change status', 'Error');
                    }
                }
            });
        }
    }

    window.change_status_reject = function() {
        var id = $(object).data("id");
        var status = $(object).data("status");
        $('#DescModal').modal("show");
        $('#id').val(id);
        $('#status').val(status);
    }

    window.status_reject = function() {
        var id = $('#id').val();
        var status = $('#status').val();
        var reason = $('#reason').val();
        $('#DescModal').modal("hide");
        $('#id').val('');
        $('#status').val('');
        $.ajax({
            "url": "{!! route('account_approval.change.status') !!}",
            "dataType": "json",
            "type": "POST",
            "data": {
                id: id,
                status: status,
                reason: reason,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.code == 200) {
                    datatable.ajax.reload();
                    toastr.success('Status changed successfully', 'Success');
                    location.reload();
                } else {
                    toastr.error('Failed to change status', 'Error');
                }
            }
        });
    }
</script>

<script type="text/javascript">
    
        $(document).ready(function() {
            (function(window, $) {
                window.LaravelDataTables = window.LaravelDataTables || {};
                window.LaravelDataTables["dataTableBuilder"] = $("#data-table").DataTable({
                    processing: true,
                    serverSide: true,
                    language: {
                        "info": "_START_ - _END_ of _TOTAL_",
                        "lengthMenu": "_MENU_ ",
                        "infoFiltered": ""
                    },
                    scrollY: '400px',
                    scrollCollapse: true,
                    paging: true,
                    searching: false,
                    bSortCellsTop : true,
                    ajax: {
                        url: '{!! route("account_approval") !!}',
                        data: function (d) {
                            d.customer_name = jQuery(".datatable-form-filter input[name='customer_name']").val();
                            d.booking_date = jQuery(".datatable-form-filter input[name='booking_date']").val();
                            d.car_model = jQuery(".datatable-form-filter input[name='car_model']").val();
                            d.status = jQuery(".datatable-form-filter input[name='status']").val();
                        },
                        error : function(d) {}
                    },
                    columns: [
                        {data: 'DT_RowIndex', name: 'DT_RowIndex',class:'text-center DT_RowIndex',title: 'No.', orderable: false, width:100,default: true},
                        {data: 'customer_name', name: 'customer_name',class:'text-center customer_name',title: 'Name', orderable: false,default: true},
                        {data: 'booking_date', name: 'booking_date',class:'text-center booking_date',title: 'Booking Date', orderable: false,default: true},
                        {data: 'car_model', name: 'car_model',class:'text-center car_model',title: 'Car Model', orderable: false,default: true},
                        {data: 'status', name: 'status',class:'text-center status',title: 'Status', orderable: false,default: true},
                        {data: 'action', name: 'action',title: 'Action', orderable: false, searchable: false, width:50,class:'text-center action_column',default: true}
                    ],
                    lengthMenu: [
                        [25, 50,100, -1 ],['25', '50','100', 'Show all' ]
                    ],
                    order: [],
                    responsive: true,
                        colReorder:{
                        enable: false,
                    },
                    dom: '<"top"f>rt<"bottom"ipl><"clear">',
                    fnInitComplete: function(settings, json) {
                        jQuery('table.table input:checkbox').map(function() {
                            if(jQuery(this).prop("checked") != true){
                                var column = table.column( jQuery(this).attr('data-column') );
                                column.visible(false);
                            }
                        });
                    },
                    pageLength: 25,
                });
            })(window, jQuery);
            
            //function change_status(object) {
                // $(document).on('click', '.change-status', function () {
                //     var id = $(this).data("id");
                //     var status = $(this).data("status");

                //     if (confirm('Are you sure?')) {
                //         $.ajax({
                //             "url": "{!! route('account_approval.change.status') !!}",
                //             "dataType": "json",
                //             "type": "POST",
                //             "data": {
                //                 id: id,
                //                 status: status,
                //                 _token: "{{ csrf_token() }}" 
                //             },
                //             success: function(response) {
                //                 if (response.code == 200) {
                //                     $('#datatable').DataTable().ajax.reload();
                //                     toastr.success('Status changed successfully', 'Success');
                //                 } else {
                //                     toastr.error('Failed to change status', 'Error');
                //                 }
                //             }
                //         });
                //     }
                // });    
            //}
        });  
        
        jQuery('.datatable-form-filter input').on('keyup', function (e) {
            if(jQuery(this).val().length >= 3 || e.keyCode == 13 || !jQuery(this).val()) {
                window.LaravelDataTables["dataTableBuilder"].draw();
                e.preventDefault();
            }
        });

        jQuery('.datatable-form-filter select').on('change', function (e) {
            window.LaravelDataTables["dataTableBuilder"].draw();
            e.preventDefault();
        });

        jQuery('input:checkbox[name="name_sort_asc"],input:checkbox[name="name_sort_desc"]').on('click', function (e) {
            window.LaravelDataTables["dataTableBuilder"].draw();
            e.preventDefault();
        });
    </script>
@endsection