@extends('Admin.layout')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Category</h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('add_category') }}"><button class="btn btn-primary">Add Category</button> </a>
        </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="customSearch" 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="packagesTable">
                            <thead>
                                <tr>
                                    <th>Sno</th>
                                    <th>Image</th>
                                    <th>Category Name</th>
                                    <th>Description</th>
                                    <th>Status</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="editModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-4 p-4">

                    <div class="modal-header border-0 pb-0">
                        <h5 class="fw-bold mb-0">Edit Category</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <form action="{{ route('category_update') }}" method="POST" enctype="multipart/form-data" id="editForm">
                        @csrf
                        <input type="hidden" name="id" id="edit_category_id" value="{{ old('id') }}">
                        <div class="modal-body">
                            <div class="row">

                                <div class="col-lg-12 mb-3">
                                    <label class="form-label">Category Name</label>

                                    <input type="text" class="form-control @error('category_name') is-invalid @enderror"
                                        name="category_name" id="edit_category_name" value="{{ old('category_name') }}"
                                        placeholder="Enter Category Name">

                                    @error('category_name')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                                <div class="col-lg-12 mb-3">

                                    <label class="form-label">Category Image</label>

                                    <input type="file" class="form-control @error('image') is-invalid @enderror"
                                        name="image">

                                    @error('image')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror

                                </div>

                                <div class="col-lg-12 mb-3">

                                    <label class="form-label">
                                        Description
                                    </label>

                                    <textarea rows="3" class="form-control @error('description') is-invalid @enderror"
                                        name="description" id="edit_description">{{ old('description') }}</textarea>

                                    @error('description')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror

                                </div>

                                {{-- <div class="col-lg-6 mb-3">
                                    <label class="form-label">Description <small
                                            class="text-muted">(Optional)</small></label>
                                    <textarea rows="2" class="form-control @error('description') is-invalid @enderror"
                                        name="description" id="edit_description"
                                        placeholder="Enter Description">{{ old('description') }}</textarea>
                                    @error('description')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div> --}}

                            </div>
                        </div>

                        <div class="modal-footer border-0 pt-0 justify-content-center gap-3">
                            <button type="button" class="btn btn-outline-secondary px-4"
                                data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary px-4" id="editSubmitBtn">Update</button>
                        </div>

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

        <div class="modal fade" id="statusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

            <div class="modal-dialog modal-sm modal-dialog-centered">
                <form action="{{ route('category_status') }}" method="POST" id="statusForm">
                    @csrf
                    <div class="modal-content rounded-4 text-center p-4 py-5">
                        <h5 class="fw-bold mb-2">Change Status</h5>
                        <input type="hidden" name="id" id="status_category_id">
                        <p class="text-muted" id="statusMessage">
                            Are you sure you want to change status?
                        </p>

                        <div class="d-flex justify-content-center align-items-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="submit" class="btn btn-success p-3 ms-2 fw-semibold" id="confirmStatus">
                                Yes, Change
                            </button>

                        </div>

                    </div>
                </form>
            </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 = $('#packagesTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: "{{ route('category_data') }}",
                    columns: [
                        { data: 'DT_RowIndex', orderable: false, searchable: false },

                        { data: 'image', orderable: false, searchable: false },

                        { data: 'category_name' },

                        { data: 'description' ,  className: 'text-center'},

                        { data: 'status', orderable: false, searchable: false },

                        {
                            data: 'action',
                            orderable: false,
                            searchable: false,
                            className: 'text-center'
                        },
                    ],
                    dom: 'rt<"d-flex justify-content-between align-items-center p-3"ip>',
                });
                // search
                $('#customSearch').on('keyup', function () {
                    table.search(this.value).draw();
                });
                // $('#customSearch').on('keyup', function () { table.search(this.value).draw(); });

                // length
                $('#pageLength').on('change', function () {
                    table.page.len(this.value).draw();
                });
                $(document).on('click', '.deleteBtn', function () {
                    let id = $(this).data('id');
                    $('#delete_id').val(id);
                });




            });
        </script>
        <script>


            $(document).on('click', '.editBtn', function () {
                let id = $(this).data('id');
                let name = $(this).data('name');
                let description = $(this).data('description');

                $('#edit_category_id').val(id);
                $('#edit_category_name').val(name);
                $('#edit_description').val(description);


                $('#err_package_name').addClass('d-none').text('');
                $('#err_duration_months').addClass('d-none').text('');
                $('#err_price').addClass('d-none').text('');
            });


            document.getElementById('editSubmitBtn').addEventListener('click', function () {
                this.disabled = true;
                this.innerText = 'Processing...';
                document.getElementById('editForm').submit();
            });
        </script>

        <script>
            document.getElementById('confirmStatus').addEventListener('click', function () {
                let btn = this;
                btn.disabled = true;
                btn.innerText = 'Processing...';
                document.getElementById('statusForm').submit();
            });
        </script>
        <script>
            $(document).on('click', '.statusBtn', function () {

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

                $('#status_category_id').val(id);

                if (status == 1) {
                    $('#statusMessage').text(
                        'Are you sure you want to deactivate this user?'
                    );
                } else {
                    $('#statusMessage').text(
                        'Are you sure you want to activate this user?'
                    );
                }
            });
        </script>

        @if(session('open_edit_modal'))
            <script>

                document.addEventListener('DOMContentLoaded', function () {
                    var editModal = new bootstrap.Modal(document.getElementById('editModal'));
                    editModal.show();
                });
            </script>
        @endif
@endsection