@extends('Kitchen.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>

{{-- ── Page Header ── --}}
<div class="row align-items-center justify-content-between mb-3 mt-3">

    <div class="col-auto">
        <h5 class="mb-0">
            <i class="ti tabler-category me-2"></i>
            Create Category
        </h5>
    </div>

    <div class="col-auto">
        <a href="{{ route('kitchen.add_category') }}" class="btn btn-secondary">
            <i class="ti tabler-arrow-left me-1"></i>
            Back
        </a>
    </div>

</div>
{{-- ── Add Form ── --}}
<div class="row d-flex justify-content-center">
    <div class="col-lg-6">
        <div class="card p-4 m-2 mt-0">
            <form id="addCategoryForm">
                <h6>Create Category</h6>

                <div class="col-lg-12 mt-2 mb-2">
                    <label class="form-label">Category</label>
                    <input type="text" name="category" id="category"
                        class="form-control" placeholder="Enter Category">
                    <small id="error_category" class="text-danger error-msg"></small>
                </div>

                <div class="col-lg-12 mt-2 mb-2">
                    <label class="form-label">Choose Image</label>
                    <input type="file" name="image" id="image"
                        class="form-control" accept="image/*">
                    <small id="error_image" class="text-danger error-msg"></small>
                    {{-- Image Preview --}}
                    <div class="mt-2" id="add_image_preview_wrap" style="display:none;">
                        <img id="add_image_preview" src="" class="preview-img">
                    </div>
                </div>

                <div class="form-actions mt-4 d-flex gap-3 justify-content-center">
                    <button type="button" class="btn btn-primary" id="finalSubmit">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ── 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-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>
$(document).ready(function () {

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

    function initTable() {
        table = $('#usersTable').DataTable({
            processing: true,
            ajax: {
                url: "{{ route('kitchen.kitchen_categoryData') }}",
                type: "GET",
                dataSrc: 'data'
            },
            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) {
                        return `
                            <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">
                            </i>
                            <i class="ti tabler-trash menu-icon text-danger cursor-pointer delete-btn"
                               data-id="${data.id}">
                            </i>
                        `;
                    }
                }
            ]
        });
    }

    initTable();

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

    $('#searchInput').on('keyup', function () {
        table.search(this.value).draw();
    });

    $('#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