@extends('Admin.layout')
<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;
    }
</style>
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                
                Create Category
            </h5>
        </div>
    </div>

    <div class="row d-flex justify-content-center">
        <div class="col-lg-6">
            <div class="card p-4 m-2 mt-0">
                <form id="addAttendanceForm">
                    <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">
                        <small id="error_image" class="text-danger error-msg"></small>
                    </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>

    <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="toDate" class="form-control" placeholder="Search">
            </div>
        </div>


        <div class="table-responsive pt-0 pb-2">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <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>
            </div>
        </div>
    </div>


    <div class="modal fade" id="delete" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Delete branch</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this branch?
                    <input type="hidden" id="delete_id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">
                        Delete
                    </button>
                </div>
            </div>
        </div>
    </div>

    <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 action="#" 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" value="Mixture">
                        <small id="error_edit_category" class="text-danger"></small>

                    </div>

                    <div class="mb-3 text-start">
                        <label class="form-label">Choose Image</label>
                        <input type="file" id="edit_image" class="form-control">
                        <small id="error_edit_image" class="text-danger"></small>

                    </div>

                    <div>

                        <button class="btn btn-primary" type="button" id="updateBtn">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <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 table = $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('categoryData') }}",
                    type: "GET"
                },
                pageLength: 10,
                searching: true,
                ordering: false,
                lengthChange: false,

                columns: [
                    {
                        data: null,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    { data: 'created_at' },
                    { data: 'category' },
                    { data: 'image', orderable: false, searchable: false },
                    { data: 'action', orderable: false, searchable: false }
                ]
            });


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


            $('.form-control').on('keyup change', function () {
                $(this).removeClass('is-invalid');
                let id = $(this).attr('id');
                $('#error_' + id).text('');
            });


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

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

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

                btn.html('Submitting...');
                btn.blur();

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

                $.ajax({
                    url: "{{ route('storeCategory') }}",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,

                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },

                    success: function (res) {

                        if (res.status) {

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

                            table.ajax.reload(null, false);

                            $('#addAttendanceForm')[0].reset();
                        }
                        else {
                            showToast(res.message, "bg-danger");
                        }

                        btn.html(originalText);
                    },

                    error: function (xhr) {

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

                        if (xhr.status === 422) {

                            let res = xhr.responseJSON;

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

                            if (res.errors) {
                                $.each(res.errors, function (key, value) {

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

                                });
                            }
                        }
                        else {
                            showToast("Server Error", "bg-danger");
                        }

                        btn.html(originalText);
                    }
                });
            });


            $(document).on('click', '.tabler-edit', function () {

    let id = $(this).data('id');
    let category = $(this).data('category');

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

});

$('#updateBtn').click(function () {

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

    btn.html('Updating...');

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

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

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

        success: function (res) {

            if (res.status) {

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

                $('#editCategoryView').modal('hide');

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

                // 🔥 reload table
                $('#usersTable').DataTable().ajax.reload(null, false);

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

            btn.html(originalText);
        },

        error: function (xhr) {

            showToast("Update failed", "bg-danger");

            btn.html(originalText);
        }
    });

});

            // =========================
            // DELETE ID CAPTURE
            // =========================
            $(document).on('click', '.tabler-trash', function () {
                let id = $(this).data('id');
                $('#delete_id').val(id);
            });

            // =========================
            // DELETE CATEGORY (LIKE ADVANCE)
            // =========================
           $('#confirmDelete').click(function () {

    let id = $('#delete_id').val();

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

    let btn = $(this);
    btn.prop('disabled', true).html('Deleting...');

    $.ajax({
        url: "{{ route('deleteCategory') }}",
        type: "POST",
        data: {
            id: id,
            _token: $('meta[name="csrf-token"]').attr('content')
        },

        success: function (res) {

            if (res.status) {

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

                const modalEl = document.getElementById('delete');
                const modal = bootstrap.Modal.getInstance(modalEl);
                modal.hide();

                table.ajax.reload(null, false);

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

            btn.prop('disabled', false).html('Delete');
        },

        error: function () {

            btn.prop('disabled', false).html('Delete');
            showToast("Delete failed", "bg-danger");
        }
    });
});
$('#delete').on('hidden.bs.modal', function () {
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();
    $('body').css('padding-right', '');
});
            
            


        });
    </script>
@endsection