@extends('admin.layout.index')
@section('title', 'Admin | Drivers Management')
@section('custom-style')
    <style>
        .custom-status {
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
        }
    </style>
@endsection
@section('content')

    <div class="main-content app-content">
        <div class="container-fluid">

            <!-- Start::page-header -->
            <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h1 class="page-title fw-medium fs-18 mb-2">Drivers Management</h1>
                    <div class="">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Drivers Detail</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- End::page-header -->



            <!-- Start::row-4 -->
            <div class="row">
                <div class="col-xl-12">
                    <div class="card custom-card">
                        <div class="card-header justify-content-between">
                            <div class="card-title">
                                All Drivers
                            </div>

                            <div class="d-flex flex-wrap gap-2">
                                <a href="{{ route('drivers-map-view') }}"
                                    class="btn btn-primary btn-sm btn-wave waves-effect waves-light">
                                    Driver Map View <i class="bi bi-map ms-1"></i>
                                </a>
                                <div>
                                    <select id="filter-status" class="form-select form-select-lg custom-status">
                                        <option selected="" value="">Status</option>
                                        <option value="approved">Approved</option>
                                        <option value="rejected">Rejected</option>
                                        <option value="pending">Pending</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-2">
                            <div class="table-responsive">
                                <table id="Driverstable" class="table text-nowrap table-hover">
                                    <thead>
                                        <tr>
                                            {{-- <th scope="row" class="ps-4"><input class="form-check-input"
                                                    type="checkbox" id="checkboxNoLabel1" value="" aria-label="...">
                                            </th> --}}
                                            <th scope="col" style="display: none;"></th>
                                            <th scope="col">Name</th>
                                            <th scope="col">Email ID</th>
                                            <th scope="col">Phone</th>
                                            <th scope="col">Created Date</th>
                                            <th scope="col">Payable Comission</th>
                                            <th scope="col">Commission Status</th>
                                            <th scope="col">Commission Action</th>
                                            <th scope="col">Status</th>
                                            <th scope="col">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- End::row-4 -->

        </div>
    </div>


    <div class="modal fade" id="driverActionModal" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
        tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Driver Verification</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure? You want to change driver status</p>
                    {{-- <p class="">You won't be able to revert this!</p> --}}
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="approveBtn" data-bs-toggle="modal">Yes,
                        Approve</button>
                    <button class="btn btn-outline-danger" id="rejectBtn" data-bs-dismiss="modal">No, Reject</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="commissionModaltrue" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Driver Commission</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure? You want to change commission status</p>
                    {{-- <p class="">You won't be able to revert this!</p> --}}
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="paidBtn" data-bs-toggle="modal">Paid</button>
                    <button class="btn btn-outline-danger" id="unpaidBtn" data-bs-dismiss="modal">Unpaid</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="deleteModal1" aria-hidden="true" aria-labelledby="deleteModalToggleLabel" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="deleteModalToggleLabel">Driver Delete</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure? You won't be able to revert this!</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" id="deleteBtn" data-bs-toggle="modal">Yes,
                        Delete</button>
                    <button class="btn btn-outline-danger" data-bs-dismiss="modal">No, Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('custom-script')
    <script src="{{ asset('assets/js/invoice-list.js') }}"></script>

    <script>
        $(document).ready(function() {
            let table = $('#Driverstable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('drivers.index') }}",
                    cache: false,
                    data: function(d) {
                        d.status = $('#filter-status').val();
                        // d.search = $('#filter-search').val();
                    }
                },
                order: [
                    [0, 'desc']
                ],
                columnDefs: [{
                    targets: [0],
                    visible: false,
                    searchable: false
                }],
                columns: [{
                        data: 'id',
                        name: 'id',
                        visible: false,
                        searchable: false
                    },
                    {
                        data: 'dname',
                        name: 'dname',
                        // orderable: false,
                        // searchable: false
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'phone',
                        name: 'phone'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                    },
                    {
                        data: 'payable_commission_amount',
                        name: 'payable_commission_amount',
                    },
                    {
                        data: 'commission_status',
                        name: 'commission_status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'commission',
                        name: 'commission',
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            // Handle Search Button
            $('#search-btn').on('click', function() {
                table.draw();
            });

            // Optional: Search Input (for dynamic search)
            $('#datatable-search-input').on('keyup', function() {
                table.search(this.value).draw();
            });

            $('#filter-status').on('change keyup', function() {
                table.draw();
            });
        });

        // Button event listeners for Approve and Reject
        $('#approveBtn').on('click', function() {
            approveDriver();
        });

        $('#rejectBtn').on('click', function() {
            rejectDriver();
        });

        $('#paidBtn').on('click', function() {
            paidDriver();
        });

        $('#unpaidBtn').on('click', function() {
            unpaidDriver();
        });

        $('#deleteBtn').on('click', function() {
            deleteDriver();
        });

        let driverId = null;

        function openDriverActionModal(id, actionType) {
            driverId = id;
            // Update modal content based on action type (approve/reject)
            if (actionType === 'approve') {
                $('#driverActionModal .modal-body').html('<p>Are you sure you want to approve this driver?</p>');
                $('#approveBtn').text('Yes, Approve');
                $('#rejectBtn').text('No, Reject').removeClass('btn-outline-danger').addClass('btn-outline-secondary');
            } else {
                $('#driverActionModal .modal-body').html('<p>Are you sure you want to reject this driver?</p>');
                $('#approveBtn').text('Yes, Reject');
                $('#rejectBtn').text('No, Cancel').removeClass('btn-outline-secondary').addClass('btn-outline-danger');
            }

            $('#driverActionModal').modal('show'); // Show modal
        }

        function commissionModal(id) {
            driverId = id;

            $('#commissionModaltrue').modal('show'); // Show modal
        }

        function openDeleteModal(id) {
            driverId = id;
            console.log(driverId);
            $('#deleteModal1').modal('show');
        }

        // Delete Driver
        function deleteDriver() {
            console.log("Approving Driver with ID: " + driverId);
            url = "{{ url('admin/drivers-delete') }}";
            $.ajax({
                url: url + '/' + driverId,
                type: 'POST',
                data: {
                    id: driverId,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log(response);
                    notyf.success('Driver Deleted Successfully!');
                    $('#deleteModal1').modal('hide');
                    $('#Driverstable').DataTable().ajax.reload();
                },
                error: function(response) {
                    console.error(response);
                    notyf.error('Failed to approve driver');
                }
            });
        }


        // Approve Driver
        function approveDriver() {
            console.log("Approving Driver with ID: " + driverId);
            url = "{{ url('admin/drivers-status') }}";
            // AJAX Request to approve the driver
            $.ajax({
                url: url + '/' + driverId, // Adjust the URL if necessary
                type: 'POST',
                data: {
                    id: driverId,
                    status: 'approved', // Change status to 'approved'
                    _token: '{{ csrf_token() }}' // Include CSRF token
                },
                success: function(response) {
                    console.log(response);
                    notyf.success('Driver Approved Successfully!');
                    $('#driverActionModal').modal('hide'); // Close modal
                    $('#Driverstable').DataTable().ajax.reload(); // Reload the DataTable to show updated status
                },
                error: function(response) {
                    console.error(response);
                    notyf.error('Failed to approve driver');
                }
            });
        }

        // Reject Driver
        function rejectDriver() {
            console.log("Rejecting Driver with ID: " + driverId);
            url = "{{ url('admin/drivers-status') }}";

            // AJAX Request to reject the driver
            $.ajax({
                url: url + '/' + driverId, // Adjust the URL if necessary
                type: 'POST',
                data: {
                    id: driverId,
                    status: 'rejected', // Change status to 'rejected'
                    _token: '{{ csrf_token() }}' // Include CSRF token
                },
                success: function(response) {
                    console.log(response.message);
                    notyf.success('Driver Rejected Successfully!');
                    $('#driverActionModal').modal('hide'); // Close modal
                    // Refresh table or update the driver status in the table here
                    $('#Driverstable').DataTable().ajax.reload(); // Reload the DataTable to show updated status
                },
                error: function(response) {
                    console.error(response);
                    notyf.error('Failed to reject driver');
                }
            });
        }

        // Approve Driver
        function paidDriver() {
            console.log("Approving Driver with ID: " + driverId);
            url = "{{ url('admin/commission-status') }}";
            // AJAX Request to approve the driver
            $.ajax({
                url: url + '/' + driverId, // Adjust the URL if necessary
                type: 'POST',
                data: {
                    id: driverId,
                    status: 'paid', // Change status to 'approved'
                    _token: '{{ csrf_token() }}' // Include CSRF token
                },
                success: function(response) {
                    console.log(response);
                    notyf.success('Driver Status Changes Successfully!');
                    $('#driverActionModal').modal('hide'); // Close modal
                    $('#Driverstable').DataTable().ajax.reload(); // Reload the DataTable to show updated status
                },
                error: function(response) {
                    console.error(response);
                    notyf.error('Failed to approve driver');
                }
            });
        }

        // Reject Driver
        function unpaidDriver() {
            console.log("Rejecting Driver with ID: " + driverId);
            url = "{{ url('admin/commission-status') }}";

            // AJAX Request to reject the driver
            $.ajax({
                url: url + '/' + driverId, // Adjust the URL if necessary
                type: 'POST',
                data: {
                    id: driverId,
                    status: 'unpaid', // Change status to 'rejected'
                    _token: '{{ csrf_token() }}' // Include CSRF token
                },
                success: function(response) {
                    console.log(response.message);
                    notyf.success('Driver Status Changes Successfully!');
                    $('#driverActionModal').modal('hide'); // Close modal
                    // Refresh table or update the driver status in the table here
                    $('#Driverstable').DataTable().ajax.reload(); // Reload the DataTable to show updated status
                },
                error: function(response) {
                    console.error(response);
                    notyf.error('Failed to reject driver');
                }
            });
        }

        // Open modal and assign driver ID for approval/rejection
        function openDriverActionModal(id) {
            driverId = id; // Store the driver ID
            $('#driverActionModal').modal('show'); // Show the modal
        }
    </script>


@endsection