@extends('Admin.layout')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <style>
        .dt-search {
            display: none;
        }

        .is-invalid {
            border: 2px solid red !important;
        }

        .preview-img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #ddd;
        }
    </style>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">


    {{-- ── Page Header ── --}}

    <div class="row align-items-center justify-content-between mb-3 mt-3">

        <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
            <div class="col-auto">
                <h5 class="mb-0">
                    <i class="ti tabler-category me-2"></i>
                    Category Management
                </h5>
            </div>
            <div class="col-auto d-flex gap-2">
                <button type="button" id="printBtn" class="btn btn-label-secondary">Print</button>
                <button type="button" id="exportBtn" class="btn btn-label-secondary">Export</button>
            </div>
        </div>

        {{-- <div class="col-auto">
            <a href="{{ route('kitchen.add_category_form') }}" class="btn btn-primary">
                <i class="ti tabler-plus me-1"></i>
                Add Category
            </a>
        </div> --}}

    </div>
    {{-- ── Add Form ── --}}


    {{-- ── Table ── --}}
    <div class="card p-0 m-2">

        <div class="row mb-3 align-items-center p-3 g-2">
            {{-- <div class="col-1">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div> --}}
            <div class="col-md-2">
                <label class="form-label">From Date</label>
                {{-- <input type="date" id="fromDate" class="form-control"> --}}
                <input type="text" class="form-control" id="fromDate" placeholder="DD/MM/YYYY">

            </div>

            <div class="col-md-2">
                <label class="form-label">To Date</label>
                {{-- <input type="date" id="toDate" class="form-control" value="{{ now()->format('Y-m-d') }}"> --}}
                <input type="text" class="form-control" id="toDate" placeholder="DD/MM/YYYY">

            </div>
            <div class="col-md-3 ms-auto">
                <input type="text" id="searchInput" class="form-control" placeholder="Search">
            </div>
        </div>

        <div class="table-responsive pt-0 pb-2">
            <table class="table" id="usersTable">
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Date</th>
                        <th>Category</th>
                        <th>Image</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    {{-- ── Edit Modal ── --}}
    <div class="modal fade" id="editCategoryView" tabindex="-1" data-bs-keyboard="true">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <form id="editCategoryForm">
                    <input type="hidden" id="edit_id">
                    <h6>Edit Category</h6>

                    <div class="mb-3 text-start">
                        <label class="form-label">Category</label>
                        <input type="text" id="edit_category" class="form-control">
                        <small id="error_edit_category" class="text-danger"></small>
                    </div>

                    <div class="mb-3 text-start">
                        <label class="form-label">Current Image</label>
                        <div class="mb-2" id="edit_current_image_wrap">
                            <img id="edit_current_image" src="" class="preview-img">
                        </div>
                        <label class="form-label">Change Image</label>
                        <input type="file" id="edit_image" class="form-control" accept="image/*">
                        {{-- New image preview --}}
                        <div class="mt-2" id="edit_new_preview_wrap" style="display:none;">
                            <img id="edit_new_preview" src="" class="preview-img">
                        </div>
                        <small id="error_edit_image" class="text-danger"></small>
                    </div>

                    <button class="btn btn-primary" type="button" id="updateBtn">Update</button>
                </form>
            </div>
        </div>
    </div>

    {{-- ── Delete Modal ── --}}
    <div class="modal fade" id="delete" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <input type="hidden" id="delete_id">
                <h5 class="fw-bold mb-2">Are you sure?</h5>
                <p class="text-muted">This category will be permanently deleted.</p>
                <div class="d-flex justify-content-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold"
                        data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger p-3 fw-semibold" id="confirmDelete">Yes, Delete</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Scripts ── --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


    <script>
        $(document).ready(function () {

            flatpickr("#fromDate", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                onChange: function () {
                    table.ajax.reload();
                }
            });

            flatpickr("#toDate", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                allowInput: true,
                defaultDate: new Date(),
                onChange: function () {
                    table.ajax.reload();
                }
            });

            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            let table;

            function initTable() {
                table = $('#usersTable').DataTable({
                    processing: true,
                    lengthChange: true,
                    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                    ajax: {
                        url: "{{ route('admin_categoryData') }}",
                        type: "GET",
                        dataSrc: 'data',
                        data: function (d) {
                            d.from_date = $('#fromDate').val();
                            d.to_date = $('#toDate').val();
                        }
                    },
                    pageLength: 10,
                    searching: true,
                    ordering: true,
                    lengthChange: false,
                    columns: [{
                        data: 'sno',
                        orderable: false
                    },
                    {
                        data: 'created_at'
                    },
                    {
                        data: 'category'
                    },
                    {
                        data: 'image',
                        orderable: false,
                        searchable: false,
                        render: function (data) {
                            return data ?
                                `<img src="${data}" width="45" height="45" class="rounded border">` :
                                '<span class="text-muted">No Image</span>';
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        searchable: false,
                        render: function (data) {

                            const categoryUrlTemplate =
                                @json(route(
                                    'category_based_products',
                                    ['category_id' => '__CATEGORY_ID__']
                                ));

                            const categoryUrl = categoryUrlTemplate.replace(
                                '__CATEGORY_ID__',
                                data.id
                            );

                            return `
                                                                         <div class="d-flex align-items-center gap-3">

                                        <i class="ti tabler-edit menu-icon text-primary cursor-pointer edit-btn"
                                                                                                                               data-id="${data.id}"
                                                                                                                               data-category="${data.category}"
                                                                                                                               data-image="${data.image ?? ''}"
                                                                                                                               data-bs-toggle="modal"
                                                                                                                               data-bs-target="#editCategoryView"
                                                                                                                               title="Edit Category">
                                                                                                                            </i>

                                <i class="ti tabler-trash menu-icon text-danger cursor-pointer delete-btn"
                                                                                                                               data-id="${data.id}"
                                                                                                                               title="Delete Category">
                                                                     </i>

                                                                                                                            <a href="${categoryUrl}"
                                                                                                                               class="text-info"
                                                                                                                               title="View Category Products">
                                                                                                                                <i class="ti tabler-eye menu-icon cursor-pointer"></i>
                                                                                                                            </a>

                                                                                                                        </div>
                                                                                                                    `;
                        }
                    }
                    ]
                });
            }

            initTable();

            $('#pageLength').on('change', function () {
                table.page.len($(this).val()).draw();
            });

            $('#searchInput').on('keyup', function () {
                table.search(this.value).draw();
            });
            // $('#fromDate, #toDate').on('change', function () {
            //     table.ajax.reload();
            // });

            $('#exportBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#fromDate').val() || '',
                    to_date: $('#toDate').val() || ''
                });
                window.location.href = "{{ route('kitchen.kitchen_categoryExport') }}?" + params.toString();
            });

            $('#printBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#fromDate').val() || '',
                    to_date: $('#toDate').val() || ''
                });
                window.open("{{ route('kitchen.kitchen_categoryPrint') }}?" + params.toString(), '_blank');
            });

            $('#image').on('change', function () {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        $('#add_image_preview').attr('src', e.target.result);
                        $('#add_image_preview_wrap').show();
                    };
                    reader.readAsDataURL(file);
                }
            });

            $('#finalSubmit').on('click', function () {

                const btn = $(this);
                const originalText = btn.html();

                $('.error-msg').text('');
                $('.form-control').removeClass('is-invalid');

                btn.html('Submitting...').prop('disabled', true);

                let formData = new FormData($('#addCategoryForm')[0]);

                $.ajax({

                    url: "{{ route('kitchen.kitchen_storeCategory') }}",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    success: function (res) {

                        btn.html(originalText).prop('disabled', false);

                        if (res.status) {

                            showToast(res.message, "bg-success");

                            $('#addCategoryForm')[0].reset();

                            $('#add_image_preview_wrap').hide();
                            $('#add_image_preview').attr('src', '');

                            table.ajax.reload(null, false);

                        } else {

                            showToast(res.message, "bg-danger");

                        }

                    },

                    error: function (xhr) {

                        btn.html(originalText).prop('disabled', false);

                        if (xhr.status === 422) {

                            $.each(xhr.responseJSON.errors, function (key, value) {

                                $('#' + key).addClass('is-invalid');
                                $('#error_' + key).text(value[0]);

                            });

                            showToast(xhr.responseJSON.message, "bg-danger");

                        } else {

                            showToast("Server Error", "bg-danger");

                        }

                    },
                });

            });


            function showToast(message, bg = "bg-success") {

                let toast = $(`
                                                                                                                        <div class="toast align-items-center text-white ${bg} border-0 position-fixed"
                                                                                                                             style="top:20px;right:20px;z-index:99999;">
                                                                                                                            <div class="d-flex">
                                                                                                                                <div class="toast-body">${message}</div>
                                                                                                                                <button type="button"
                                                                                                                                        class="btn-close btn-close-white me-2 m-auto"
                                                                                                                                        data-bs-dismiss="toast">
                                                                                                                                </button>
                                                                                                                            </div>
                                                                                                                        </div>
                                                                                                                    `);

                $("body").append(toast);

                let bsToast = new bootstrap.Toast(toast[0], {
                    delay: 3000
                });

                bsToast.show();

                toast.on("hidden.bs.toast", function () {
                    toast.remove();
                });

            }

            $(document).on('click', '.edit-btn', function () {
                const id = $(this).data('id');
                const category = $(this).data('category');
                const image = $(this).data('image');

                $('#edit_id').val(id);
                $('#edit_category').val(category);

                // Show current image
                if (image) {
                    $('#edit_current_image').attr('src', image);
                    $('#edit_current_image_wrap').show();
                } else {
                    $('#edit_current_image_wrap').hide();
                }

                // Reset new image preview
                $('#edit_new_preview_wrap').hide();
                $('#edit_image').val('');
            });

            $('#edit_image').on('change', function () {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        $('#edit_new_preview').attr('src', e.target.result);
                        $('#edit_new_preview_wrap').show();
                    };
                    reader.readAsDataURL(file);
                }
            });

            $('#updateBtn').click(function () {
                const btn = $(this);
                const originalText = btn.html();

                btn.html('Updating...').prop('disabled', true);

                const formData = new FormData();
                formData.append('id', $('#edit_id').val());
                formData.append('category', $('#edit_category').val());

                const image = $('#edit_image')[0].files[0];
                if (image) formData.append('image', image);

                $.ajax({
                    url: "{{ route('kitchen.kitchen_updateCategory') }}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },

                    success: function (res) {
                        if (res.status) {
                            showToast(res.message, 'bg-success');
                            $('#editCategoryView').modal('hide');
                            table.ajax.reload(null, false);
                        } else {
                            showToast(res.message, 'bg-danger');
                        }
                        btn.html(originalText).prop('disabled', false);
                    },

                    error: function (xhr) {
                        showToast('Update failed', 'bg-danger');
                        btn.html(originalText).prop('disabled', false);
                    }
                });
            });

            $(document).on('click', '.delete-btn', function () {
                $('#delete_id').val($(this).data('id'));
                $('#delete').modal('show');
            });

            $('#confirmDelete').click(function () {
                const btn = $(this);
                const id = $('#delete_id').val();

                if (!id) {
                    showToast('ID not found', 'bg-danger');
                    return;
                }

                btn.prop('disabled', true).html('Deleting...');

                $.ajax({
                    url: "{{ route('kitchen.kitchen_deleteCategory') }}",
                    type: "POST",
                    data: {
                        id: id,
                        _token: csrfToken
                    },

                    success: function (res) {
                        if (res.status) {
                            showToast(res.message, 'bg-success');
                            $('#delete').modal('hide');
                            table.ajax.reload(null, false);
                        } else {
                            showToast(res.message, 'bg-danger');
                        }
                        btn.prop('disabled', false).html('Yes, Delete');
                    },

                    error: function () {
                        showToast('Delete failed', 'bg-danger');
                        btn.prop('disabled', false).html('Yes, Delete');
                    }
                });
            });

            $('#delete, #editCategoryView').on('hidden.bs.modal', function () {
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
                $('body').css('padding-right', '');
            });

        });
    </script>



@endsection