@extends('admin.layout.index')
@section('title', 'Muftaax | Ride Category')
@section('custom-style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf/notyf.min.css">
<style>
    /* Hide arrows in number input */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    #rideCategoryTable_filter {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    #rideCategoryTable_filter label {
        display: flex !important;
        align-items: center !important;
    }

    .dataTables_empty {
        text-align: center !important;
    }

    .dataTables_processing {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 14px;
        z-index: 9999;
    }
</style>

@endsection
@section('content')

<div class="main-content app-content">
    <div class="container-fluid">
        <!-- 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">Ride Categories List</h1>
                <div class="">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Categories</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Ride Categories List</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        {{-- <div class="row align-items-center mb-4">
                <div class="col-lg-12">
                    <div class="card custom-card p-3">
                        <form>
                            <div class="row g-3">
                                <div class="col-xxl-8 col-sm-6">
                                    <div class="header-element header-search">
                                        <!-- Start::header-link -->
                                        <input type="text" class="header-search-bar form-control w-100 m-0"
                                            placeholder="Search for Results...">
                                        <a href="javascript:void(0);" class="header-search-icon-2 border-0">
                                            <i class="bi bi-search"></i>
                                        </a>
                                        <!-- End::header-link -->
                                    </div>
                                </div>
                                <!--end col-->
                                <!--end col-->
                                <div class="col-xxl-2 col-sm-4">
                                    <div>
                                        <select class="form-select form-select-lg" aria-label=".form-select-lg example">
                                            <option selected="">Status</option>
                                            <option value="1">Approved</option>
                                            <option value="2">Reject</option>
                                            <option value="3">Pending</option>
                                        </select>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-xxl-2 col-sm-4">
                                    <div>
                                        <button type="button" class="btn btn-primary w-100" onclick="SearchData();"><i
                                                class="ri-equalizer-fill me-1 align-bottom"></i>
                                            Filters
                                        </button>
                                    </div>
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </form>
                    </div>

                </div>
            </div> --}}

        <!-- Start::row-1 -->
        <div class="row">

            <div class="col-xl-12">

                <div class="card custom-card">
                    <div class="card-header justify-content-between">
                        <div class="card-title">
                            Manage Ride Categories
                        </div>
                        <div class="d-flex">
                            @can('create-ride-category')
                            <button class="btn btn-sm btn-primary btn-wave waves-light waves-effect waves-light"
                                data-bs-toggle="modal" href="#addCategory"><i
                                    class="ri-add-line fw-medium align-middle me-1"></i> Create Category
                            </button>
                            @endcan

                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsivee">
                            <table id="rideCategoryTable" class="table text-nowrap ">
                                <thead>
                                    <tr>
                                        <th scope="col">Sr No.</th>
                                        <th scope="col">Title</th>
                                        <th scope="col">Seater</th>
                                        <th scope="col">Per Mile Charge</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer border-top-0">

                    </div>
                </div>
            </div>

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

    </div>
</div>

<!-- Add Category Modal -->
<div class="modal fade" id="addCategory" tabindex="-1" aria-labelledby="addCategory" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addBannerModalLabel">Add Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" id="storeForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="categoryTitle" class="form-label">Title</label>
                        <input type="text" class="form-control" id="categoryTitle" name="name"
                            placeholder=" Enter category title">
                        <span class="text-danger d-none" id="nameError"></span>
                    </div>
                    <div class="mb-3">
                        <label for="categorySeater" class="form-label">Seater</label>
                        <select class="form-select" id="categorySeater" name="seater">
                            <option selected value="">Select Seater</option>
                            <option value="1">1 Seater</option>
                            <option value="2">2 Seater</option>
                            <option value="3">3 Seater</option>
                            <option value="4">4 Seater</option>
                            <option value="5">5 Seater</option>
                        </select>
                        <span class="text-danger d-none" id="seaterError"></span>
                    </div>
                    <div class="mb-3">
                        <label for="charge" class="form-label">Per Mile Charge</label>
                        <input type="number" class="form-control" id="charge" name="charges"
                            placeholder=" Enter per mile charge" oninput="validateInput(this)">
                        <span class="text-danger d-none" id="chargesError"></span>
                    </div>
                    {{-- Icon field --}}
                    <div class="mb-3">
                        <label for="categoryIcon" class="form-label">Category Icon</label>
                        <input type="file" class="form-control" id="categoryIcon" name="icon">
                        <span class="text-danger d-none" id="iconError"></span>
                    </div>
                    {{-- between km field --}}
                    <div class="mb-3">
                        <label for="betweenKm" class="form-label">Between km</label>
                        <input type="number" class="form-control" min="0" id="betweenKm" name="between_km"
                            placeholder=" Enter between km" oninput="validateInput(this)">
                        <span class="text-danger d-none" id="between_kmError"></span>
                    </div>
                    {{-- minimum fare --}}
                    <div class="mb-3">
                        <label for="minimumFare" class="form-label">Minimum fare</label>
                        <input type="number" class="form-control" min="0" id="minimumFare"
                            name="minimum_fare" placeholder=" Enter minimum fare" oninput="validateInput(this)">
                        <span class="text-danger d-none" id="minimum_fareError"></span>
                    </div>
                    {{-- Status field --}}
                    {{-- <div class="mb-3">
                            <label for="categoryStatus" class="form-label">Status</label>
                            <select class="form-select" id="categoryStatus">
                                <option selected>Select Status</option>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div> --}}
                    <div class="mb-3">
                        <label class="form-label">Availability</label>
                        <div class="d-flex">
                            <div class="form-check me-3">
                                <input type="hidden" name="ride_availability" value="0">
                                <input class="form-check-input" type="checkbox" id="rideAvailability" name="ride_availability" value="1">
                                <label class="form-check-label" for="rideAvailability">Ride</label>
                            </div>
                            <div class="form-check">
                                <input type="hidden" name="order_availability" value="0">
                                <input class="form-check-input" type="checkbox" id="orderAvailability" name="order_availability" value="1">
                                <label class="form-check-label" for="orderAvailability">Order</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="saveBtn">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Edit Category Modal -->
<div class="modal fade" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModal"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addBannerModalLabel">Edit Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="post" id="updateForm" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <input type="hidden" id="editCategoryId" name="id">
                        <div class="mb-3">
                            <label for="editCategoryTitle" class="form-label">Title</label>
                            <input type="text" class="form-control" id="editCategoryTitle" name="name"
                                placeholder="Enter category title">
                            <span class="text-danger d-none" id="nameEditError"></span>
                        </div>
                        <div class="mb-3">
                            <label for="editCategorySeater" class="form-label">Seater</label>
                            <select class="form-select" id="editCategorySeater" name="seater">
                                <option value="1">1 Seater</option>
                                <option value="2">2 Seater</option>
                                <option value="3">3 Seater</option>
                                <option value="4">4 Seater</option>
                                <option value="5">5 Seater</option>
                            </select>
                            <span class="text-danger d-none" id="seaterEditError"></span>
                        </div>
                        <div class="mb-3">
                            <label for="editCharge" class="form-label">Per Mile Charge</label>
                            <input type="number" class="form-control" id="editCharge" name="charges"
                                placeholder="Enter per mile charge" oninput="validateInput(this)">
                            <span class="text-danger d-none" id="chargesEditError"></span>
                        </div>
                        <div class="mb-3">
                            <label for="editCategoryIcon" class="form-label">Category Icon</label>
                            <input type="file" class="form-control" id="editCategoryIcon" name="icon">
                            <span class="text-danger d-none" id="iconEditError"></span>
                        </div>
                        <div class="mb-3">
                            <label for="editBetweenKm" class="form-label">Between km</label>
                            <input type="number" class="form-control" id="editBetweenKm" name="between_km"
                                placeholder="Enter between km" oninput="validateInput(this)">
                            <span class="text-danger d-none" id="between_kmEditError"></span>
                        </div>
                        <div class="mb-3">
                            <label for="editMinimumFare" class="form-label">Minimum fare</label>
                            <input type="number" class="form-control" id="editMinimumFare" name="minimum_fare"
                                placeholder="Enter minimum fare" oninput="validateInput(this)">
                            <span class="text-danger d-none" id="minimum_fareEditError"></span>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Availability</label>
                            <div class="d-flex">
                                <div class="form-check me-3">
                                    <input type="hidden" name="ride_availability" value="0">
                                    <input class="form-check-input" type="checkbox" id="rideEditAvailability" name="ride_availability" value="1">
                                    <label class="form-check-label" for="rideAvailability">Ride</label>
                                </div>
                                <div class="form-check">
                                    <input type="hidden" name="order_availability" value="0">
                                    <input class="form-check-input" type="checkbox" id="orderEditAvailability" name="order_availability" value="1">
                                    <label class="form-check-label" for="orderAvailability">Order</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="updateBtn">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Delete modal -->
<div class="modal fade" id="delete-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="display: grid;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body p-5 text-center">
                    <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
                        colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px">
                    </lord-icon>
                    <div class="mt-4 text-center">
                        <h4>Are You Sure?</h4>
                        <p class="text-muted fs-15 mb-4">You won't be able to revert this action!</p>
                        {{-- <form method="POST" id="deleteCampForm" class="form-submit">
                                @csrf
                                {{ method_field('DELETE') }} --}}
                        <button type="button" class="btn btn-sm btn-outline-danger m-1" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button class="btn btn-sm btn-primary m-1 delete-btn" type="submit">Yes, Delete It</button>
                        {{-- </form> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<meta name="csrf-token" content="{{ csrf_token() }}">


@endsection
@section('custom-script')
<script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script>

<script>
    $(document).ready(function() {
        let table = $('#rideCategoryTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('getAllRideCategories') }}",
            columns: [{
                    data: null,
                    render: function(data, type, row, meta) {
                        return meta.row + 1;
                    },
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'seater',
                    name: 'seater'
                },
                {
                    data: 'per_km_charges',
                    name: 'per_km_charges'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ]
        });
    });

    $('#delete-modal').on('hidden.bs.modal', function() {
        $('.modal-backdrop').remove();
    });


    function validateInput(input) {
        // Remove non-numeric characters and prevent entering 'e' or '-'
        input.value = input.value.replace(/[^0-9.]/g, '');

        // Ensure only one decimal point is allowed
        if ((input.value.match(/\./g) || []).length > 1) {
            input.value = input.value.substring(0, input.value.lastIndexOf('.'));
        }
    }

    function confirmDelete(categoryId) {
        $('#delete-modal').modal('show');

        // Unbind previous click events to avoid stacking handlers
        $('.delete-btn').off('click').on('click', function() {
            const submitButton = $(this);
            submitButton.prop('disabled', true).text('Processing...');
            deleteCategory(categoryId, submitButton);
        });
    }

    function deleteCategory(categoryId, submitButton) {
        const url = `{{ route('ride-category.delete', ['id' => '__ID__']) }}`.replace('__ID__', categoryId);

        //    var submitButton = $("#delete-btn button[type='submit']");
        $.ajax({
            // url: `/admin/ride-category-delete/${categoryId}`,
            url: url,
            method: "POST", // Use POST with method override
            data: {
                _method: 'DELETE', // Laravel's hidden method trick
                _token: $('meta[name="csrf-token"]').attr('content') // Ensure CSRF token is passed
            },
            success: function(response) {
                $('#delete-modal').modal('hide');

                const notyf = new Notyf({
                    duration: 3000,
                    position: {
                        x: 'right',
                        y: 'top',
                    },
                    dismissible: true
                });

                if (response.success) {
                    notyf.success(response.message || 'Category deleted successfully!');
                    location.reload();
                } else {
                    notyf.error(response.message || 'Failed to delete category.');
                    submitButton.prop('disabled', false).text('Yes, Delete It');
                }
            },
            error: function(xhr) {
                $('#delete-modal').modal('hide');

                const notyf = new Notyf({
                    duration: 3000,
                    position: {
                        x: 'right',
                        y: 'top',
                    },
                    dismissible: true
                });

                notyf.error('An error occurred. Please try again.');
                console.error(xhr.responseText);

                submitButton.prop('disabled', false).text('Yes, Delete It');
            }
        });
    }

    // Handle Edit button click
    $('body').on('click', '.btn-edit-category', function() {
        let categoryId = $(this).data('id');
        console.log(categoryId);

        let url = `{{ route('ride-category.edit', ':id') }}`.replace(':id', categoryId);
        $.ajax({
            url: url,
            method: "GET",
            success: function(response) {
                $('#editCategoryId').val(response.id);
                $('#editCategoryTitle').val(response.name);
                $('#editCategorySeater').val(response.seater);
                $('#editCharge').val(response.per_km);
                $('#editBetweenKm').val(response.between_km);
                $('#editMinimumFare').val(response.minimum_fare);

                // document.querySelector('#rideEditAvailability').setAttribute('checked', (response.ride_availability == 1) ? true : false);
                // $('#rideAvailability').prop('checked', (response.ride_availability == 1) ? true : false);
                $('#rideEditAvailability').prop('checked', response.ride_availability == 1 || response.ride_availability === '1');
                $('#orderEditAvailability').prop('checked', response.order_availability == 1 || response.order_availability === '1');

                $('#editCategory').modal('show');
            }
        });
    });

    // Handle Update Form Submit
    $('#updateForm').on('submit', function(e) {
        e.preventDefault();

        let formData = new FormData(this);
        let categoryId = $('#editCategoryId').val();
        console.log(categoryId);

        let url = `{{ route('ride-category.update', ':id') }}`.replace(':id', categoryId);
        let submitButton = $(this).find('#updateBtn');

        // Disable button and show processing text
        submitButton.prop('disabled', true).text('Processing...');

        $.ajax({
            url: url,
            method: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                if (response.success) {
                    new Notyf().success(response.message);
                    $('#editCategoryModal').modal('hide');
                    $('#updateForm')[0].reset();
                    $('#rideCategoryTable').DataTable().ajax.reload();
                }
                submitButton.prop('disabled', false).text(
                    'Update');
            },
            error: function(xhr) {
                if (xhr.responseJSON.errors) {
                    var errors = xhr.responseJSON;
                    if ($.isEmptyObject(errors) == false) {
                        $.each(errors.errors, function(key, value) {
                            var ErrorID = '#' + key + 'Error';
                            $(ErrorID).removeClass("d-none");
                            $(ErrorID).text(value);
                        });
                    }
                    // let notyf = new Notyf();
                    // $.each(xhr.responseJSON.errors, function(key, value) {
                    //     notyf.error(value[0]);
                    // });
                }
                submitButton.prop('disabled', false).text(
                    'Update');
            },
            complete: function() {
                // Re-enable button and reset text
                submitButton.prop('disabled', false).text('Update');
            }
        });
    });
</script>

<script>
    $(document).ready(function() {
        $('#storeForm').on('submit', function(e) {
            e.preventDefault();

            let formData = new FormData(this);
            let submitButton = $(this).find('#saveBtn');

            // Disable button and show processing text
            submitButton.prop('disabled', true).text('Processing...');
            $.ajax({
                url: "{{ route('ride-category.store') }}", // Route for storing deals
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.success) {
                        new Notyf({
                            duration: 3000,
                            position: {
                                x: 'right',
                                y: 'top'
                            },
                            ripple: true,
                            dismissible: true
                        }).success(response.message);

                        $('#addCategory').modal('hide'); // Close the modal
                        $('#storeForm')[0].reset(); // Reset form fields
                        $('#rideCategoryTable').DataTable().ajax.reload();
                    }
                },
                error: function(xhr) {
                    console.log(xhr.responseJSON.errors);

                    if (xhr.responseJSON.errors) {


                        var errors = xhr.responseJSON;
                        if ($.isEmptyObject(errors) == false) {
                            $.each(errors.errors, function(key, value) {
                                var ErrorID = '#' + key + 'Error';
                                $(ErrorID).removeClass("d-none");
                                $(ErrorID).text(value);
                            });
                        }
                        // let notyf = new Notyf({
                        //     duration: 4000,
                        //     position: {
                        //         x: 'right',
                        //         y: 'top'
                        //     },
                        //     ripple: true,
                        //     dismissible: true
                        // });

                        // $.each(xhr.responseJSON.errors, function(key, value) {
                        //     console.log(`Field: ${key}, Error: ${value[0]}`);
                        //     notyf.error(value[0]);
                        // });

                    } else {
                        new Notyf({
                            duration: 3000,
                            position: {
                                x: 'right',
                                y: 'top'
                            },
                            ripple: true,
                            dismissible: true
                        }).error('An error occurred. Please try again later.');
                    }
                    submitButton.prop('disabled', false).text(
                        'Submit');
                },
                complete: function() {
                    // Re-enable button and reset text
                    submitButton.prop('disabled', false).text('Save');
                }
            });
        });
        $('#storeForm input,#storeForm textarea,#storeForm select').on('input change', function() {
            var errorID = '#' + $(this).attr('name') + 'Error';
            if ($(this).val() !== '') {
                $(errorID).addClass('d-none');
            }
        });
    });
</script>

<script>
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // Event delegation for modal triggers
    document.addEventListener('click', function(event) {
        var target = event.target.closest('[data-modal-target]');
        if (target) {
            var modalId = target.getAttribute('data-modal-target');
            var modal = new bootstrap.Modal(document.querySelector(modalId));
            modal.show();
        }
    });
</script>
@endsection