@extends('template.app')

@section('meta')
@endsection

@section('title')
Transfers
@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">Transfers</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('transfer') }}" class="text-muted">Transfers</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">List</li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="col-5 align-self-center">
            <div class="customize-input float-right">
                @canany(['transfer-create'])
                    <a class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" href="{{ route('transfer.create') }}">Add New</a>
                @endcanany
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card" style="min-width:100% !important;">
                <div class="card-body">
                    <table class="table table-bordered data-table" id="data-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Transfer Date</th>
                                <th>Product</th>
                                <th>Variant</th>
                                <th>Vin Number</th>
                                <th>From Branch</th>
                                <th>To Branch</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="transfer_date" value="{{ request()->get('transfer_date', '') }}" class="form-control text-capitalize custom_color" id="transfer_date" autocomplete="off" autofocus tabindex="1" placeholder="DD-MM-YYYY to DD-MM-YYYY">
                                        </div>
                                    </div>
                                </th>
                                <th> 
                                    <div class="search-box-container datatable-form-filter">
                                        <div class="form-group is-empty">
                                            <input type="text" name="cm_name" value="{{ request()->get('cm_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="cv_name" value="{{ request()->get('cv_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="vin_number" value="{{ request()->get('vin_number', '') }}" 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="from_branch" value="{{ request()->get('from_branch', '') }}" 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="to_branch" value="{{ request()->get('to_branch', '') }}" 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="status" value="{{ request()->get('status', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="1">
                                        </div>
                                    </div>
                                </th>
                                <th></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.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('transfer') }}",
    //                 "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: 'transfer_date',
    //                     name: 'created_at'
    //                 },
    //                 {
    //                     data: 'cm_name',
    //                     name: 'product'
    //                 },
    //                 {
    //                     data: 'cv_name',
    //                     name: 'product'
    //                 },
    //                 {
    //                     data: 'vin_number',
    //                     name: 'vin_number'
    //                 },
    //                 {
    //                     data: 'from_branch',
    //                     name: 'from_branch'
    //                 },
    //                 {
    //                     data: 'to_branch',
    //                     name: 'to_branch'
    //                 },
    //                 {
    //                     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');
    //         });
    // });

    $(document).on("submit", ".transfer_reject",function(e){
        e.preventDefault();
        let form = $(this).serializeArray();
        let id = form[0].value;
        let reason = form[1].value;
        // alert('fsdfsd');
        $.ajax({
            "url": "{!! route('transfer.reject') !!}",
            "dataType": "json",
            "type": "POST",
            "data":{
                id: id,
                reason: reason,
                _token: "{{ csrf_token() }}"
            },
            success: function (response){
                if (response.code == 200){
                    $('.modal').modal('hide');
                    datatable.ajax.reload();
                    toastr.success('Status chagned successfully', 'Success');
                }else{
                    toastr.error('Failed to change status', 'Error');
                }
            }
        });
    }); 
    
    
    
      $(document).on("submit", ".transfer_received",function(e){
        e.preventDefault();
        let formData = new FormData(this);
        formData.append('_token', "{{ csrf_token() }}");
        $.ajax({
        "url": "{!! route('transfer.received') !!}",
        "dataType": "json",
        "type": "POST",
        "data": formData, // Send FormData object instead of serialized form data
        "processData": false, // Prevent jQuery from processing the data
        "contentType": false, // Set content type to false for FormData
    
            success: function (response){
                if (response.code == 200){
                    $('.modal').modal('hide');
                    window.LaravelDataTables["dataTableBuilder"].ajax.reload();
                    toastr.success('Status chagned successfully', 'Success');
                    $('.modal-backdrop').removeClass('show').addClass('hide');
                }else{
                    toastr.error('Failed to change status', 'Error');
                }
            }
        });
    });

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

        if (confirm('Are you sure?')) {
            $.ajax({
                "url": "{!! route('transfer.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');
                        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": ""
                    },
                    paging: true,
                    searching: false,
                    bSortCellsTop : true,
                    ajax: {
                        url: '{!! route("transfer") !!}',
                        data: function (d) {
                            d.transfer_date = jQuery(".datatable-form-filter input[name='transfer_date']").val();
                            d.cm_name = jQuery(".datatable-form-filter input[name='cm_name']").val();
                            d.cv_name = jQuery(".datatable-form-filter input[name='cv_name']").val();
                            d.vin_number = jQuery(".datatable-form-filter input[name='vin_number']").val();
                            d.from_branch = jQuery(".datatable-form-filter input[name='from_branch']").val();
                            d.to_branch = jQuery(".datatable-form-filter input[name='to_branch']").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: 'transfer_date', name: 'transfer_date',class:'text-center transfer_date',title: 'Transfer Date', orderable: false,default: true},
                        {data: 'cm_name', name: 'cm_name',class:'text-center cm_name',title: 'Product', orderable: false,default: true},
                        {data: 'cv_name', name: 'cv_name',class:'text-center cv_name',title: 'Variant', orderable: false,default: true},
                        {data: 'vin_number', name: 'vin_number',class:'text-center vin_number',title: 'VIN Number', orderable: false,default: true},
                        {data: 'from_branch', name: 'from_branch',class:'text-center from_branch',title: 'From Branch', orderable: false,default: true},
                        {data: 'to_branch', name: 'to_branch',class:'text-center to_branch',title: 'To Branch', 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: [],
                    scrollY: "450px", 
                    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);
            
            $('#transfer_date').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    format: 'DD-MM-YYYY',
                    cancelLabel: 'Clear'
                }
            });
            
            $('#transfer_date').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY') + ' to ' + picker.endDate.format('DD-MM-YYYY'));
                $('#data-table').DataTable().draw();
            });
            
            $('#transfer_date').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                $('#data-table').DataTable().draw();
            });
            //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('colortone.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