@extends('Admin.layout')
<style>
    .custom-file-upload {
        display: flex;
        align-items: center;
        border: 1px solid #dcdcdc;
        border-radius: 8px;
        overflow: hidden;
        height: 44px;
    }
    .custom-file-upload .choose-btn {
        border-radius: 8px 0 0 8px;
        padding: 10px 18px;
        white-space: nowrap;
        height: 44px;
    }
    .custom-file-upload .file-name {
        border: none;
        border-left: 1px solid #dcdcdc;
        height: 44px;
        border-radius: 0 8px 8px 0;
    }
    .custom-file-upload .file-name:focus {
        box-shadow: none;
    }
    .upload-area {
    border: 2px dashed #d3d6db;
    border-radius: 10px;
    cursor: pointer;
}
.upload-area:hover {
    background: #f8f9fa;
}
.modal {
    z-index: 1055;
}
</style>
@section('content')
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="mb-0">Create Category</h4>
    </div>
    <div class="row justify-content-center mb-4">
        <div class="col-md-6">
            <div class="card p-5 shadow-sm">
                <h6>Create Category</h6>
                <form id="categoryForm" action="{{ route('add_category') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Category</label>
                        <input type="text" name="name" class="form-control"
                            placeholder="Enter Category" value="{{ old('name') }}">
                    </div>
                    <div class="mb-3">
                        <label class="upload-box w-100">
                            <input type="file" name="image" id="categoryInput" accept="image/*" hidden>
                            <div class="upload-area text-center p-4">
                                <svg id="uploadIcon" width="56" height="56" viewBox="0 0 56 56" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M25.6663 37.3332V18.3166L19.5997 24.3832L16.333 20.9999L27.9997 9.33325L39.6663 20.9999L36.3997 24.3832L30.333 18.3166V37.3332H25.6663ZM13.9997 46.6666C12.7163 46.6666 11.6181 46.21 10.705 45.2969C9.7919 44.3838 9.33456 43.2848 9.33301 41.9999V34.9999H13.9997V41.9999H41.9997V34.9999H46.6663V41.9999C46.6663 43.2832 46.2098 44.3822 45.2967 45.2969C44.3836 46.2116 43.2846 46.6681 41.9997 46.6666H13.9997Z"
                                        fill="#080808" />
                                </svg>
                                <img id="previewImage" class="img-fluid rounded d-none" style="max-height:220px;">
                                <div  id="uploadtexts">
                                    <h5 class="mt-2" id="uploadText">Upload Category</h5>
                                <p class="text-muted" id="uploadHint">Choose photo size should be less than<br><b>2
                                        MB</b> and should be in<b> Jpg,Png,JPEG</b><br> Format.</p>
                                </div>
                            </div>
                        </label>
                    </div>
                    <button type="submit" id="submitBtn" class="btn btn-primary w-100">
                        Submit
                    </button>
                </form>
            </div>
        </div>
    </div>
    <div class="card p-3 shadow-sm">
        <div class="table-responsive">
            <table id="categoryTable" class="table table-bordered">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Created Date</th>
                        <th>Image</th> <th>Category Name</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
{{-- <div class="modal fade" id="editModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content p-4">
            <form method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="edit_id" name="id">
                <div class="mb-3">
                    <label>Category Name</label>
                    <input type="text" id="edit_name" name="name" class="form-control">
                </div>
                <div class="mb-3">
                    <label>Update Image (Optional)</label>
                    <input type="file" id="edit_image" name="image" class="form-control" accept="image/*">
                    <div class="mt-3 text-center">
                        <img id="edit_previewImage" class="img-fluid rounded d-none" style="max-height: 120px;">
                    </div>
                </div>
                <button class="btn btn-primary w-100">Update</button>
            </form>
        </div>
    </div>
</div> --}}
<div class="modal fade" id="editModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content p-4">

            <form method="POST" enctype="multipart/form-data">
                @csrf

                <input type="hidden" id="edit_id" name="id">

                <div class="mb-3">
                    <label>Category Name</label>
                    <input type="text" id="edit_name" name="name" class="form-control">
                </div>

                <div class="mb-3">
                    <label>Update Image (Optional)</label>

                    <input type="file" id="edit_image" name="image" class="form-control" accept="image/*">

                    <div class="mt-3 text-center">
                        <img id="edit_previewImage"
                             class="img-fluid rounded d-none"
                             style="max-height:120px;">
                    </div>
                </div>

                <button class="btn btn-primary w-100">
                    Update
                </button>

            </form>

        </div>
    </div>
</div>
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content text-center p-8">
            <form action="#" method="POST">
                @csrf
                <input type="hidden" id="delete_id" name="id">
                <h4>Are you sure?</h4>
                <p class="text-muted">Do you really want to delete this category?</p>
                <div class="d-flex gap-3">
                    <button type="button" class="btn btn-outline-secondary w-100" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-danger w-100">
                        Yes, Delete
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="position-fixed top-0 end-0 p-3" style="z-index: 9999">
    <div id="customToast" class="toast text-white border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body" id="customToastBody"></div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>
{{-- ================= Scripts ================= --}}
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<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>
    $(document).ready(function() {
        // ================= IMAGE PREVIEW LOGIC (CREATE FORM) =================
        $('#categoryInput').on('change', function(e) {
            let file = e.target.files[0];
            if (file) {
                let reader = new FileReader();
                reader.onload = function(e) {
                    $('#previewImage').attr('src', e.target.result).removeClass('d-none');
                    $('#uploadIcon').addClass('d-none');
                    $('#uploadtexts').addClass('d-none');
                }
                reader.readAsDataURL(file);
            }
        });
        // ================= IMAGE PREVIEW LOGIC (EDIT MODAL) =================
    $('#edit_image').on('change', function (e) {

    let file = e.target.files[0];

    if (file) {

        let reader = new FileReader();

        reader.onload = function (e) {
            $('#edit_previewImage')
                .attr('src', e.target.result)
                .removeClass('d-none');
        }

        reader.readAsDataURL(file);
    }

});
        // ================= DATATABLE =================
        let table = $('#categoryTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('category_data') }}",
            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'created_at'
                },
                {
                    data: 'image', // ADDED Image Column Mapping
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'category_name'
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });
        // ================= ADD CATEGORY =================
        let isSubmitting = false;
        $('#categoryForm').on('submit', function(e) {
            if (isSubmitting) {
                e.preventDefault();
                return false;
            }
            e.preventDefault();
            let form = $(this);
            let btn = $('#submitBtn');
            let formData = new FormData(this); // FormData handles files automatically
            isSubmitting = true;
            btn.prop('disabled', true).html("Processing...");
            $.ajax({
                url: form.attr('action'),
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    showToast(response.success, "success");
                    form[0].reset();
                    // Reset custom image preview UI
                    $('#previewImage').addClass('d-none').attr('src', '');
                    $('#uploadIcon').removeClass('d-none');
                    $('#uploadtexts').removeClass('d-none');
                    btn.prop('disabled', false).html("Submit");
                    table.ajax.reload(null, false);
                    isSubmitting = false;
                },
                error: function(xhr) {
                    let error = xhr.responseJSON?.message || "Something went wrong";
                    showToast(error, "error");
                    btn.prop('disabled', false).html("Submit");
                    isSubmitting = false;
                }
            });
        });
        // ================= EDIT CLICK =================
      

        $(document).on('click', '.editBtn', function () {

    let id = $(this).data('id');
    let name = $(this).data('name');
    let image = $(this).data('image');

    $('#edit_id').val(id);
    $('#edit_name').val(name);

    if (image) {
        $('#edit_previewImage')
            .attr('src', image)
            .removeClass('d-none');
    } else {
        $('#edit_previewImage')
            .addClass('d-none');
    }

    $('#edit_image').val('');

    $('#editModal').modal('show');
});
        // ================= EDIT UPDATE =================
        $('#editModal form').on('submit', function(e) {
            e.preventDefault();
            let formData = new FormData(this); // FormData supports files
            $.ajax({
                url: "{{ route('edit_category') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    $('#editModal').modal('hide');
                    showToast(response.success, "success");
                    table.ajax.reload(null, false);
                },
                error: function() {
                    showToast("Update failed", "error");
                }
            });
        });
        // ================= DELETE CLICK =================
        $(document).on('click', '.deleteBtn', function() {
            $('#delete_id').val($(this).data('id'));
            $('#deleteModal').modal('show');
        });
        // ================= DELETE CONFIRM =================
        $('#deleteModal form').on('submit', function(e) {
            e.preventDefault();
            let id = $('#delete_id').val();
            $.ajax({
                url: "{{ route('delete_category') }}",
                type: "POST",
                data: {
                    id: id,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    $('#deleteModal').modal('hide');
                    showToast(response.success, "success");
                    table.ajax.reload(null, false);
                },
                error: function() {
                    showToast("Delete failed", "error");
                }
            });
        });
    });
    // ================= TOAST =================
    function showToast(message, type = "success") {
        let toastEl = document.getElementById("customToast");
        let bodyEl = document.getElementById("customToastBody");
        bodyEl.innerText = message;
        toastEl.classList.remove("bg-success", "bg-danger");
        toastEl.classList.add(type === "success" ? "bg-success" : "bg-danger");
        new bootstrap.Toast(toastEl).show();
    }
</script>
@endsection