@extends('layouts.app')

@section('content')
<div class="contents">
    <div class="crm mb-25">
        <div class="container-fluid">
            <div class="row ">
                <div class="col-lg-12 d-flex justify-content-end">
                    @include('layouts.navigation')
                </div>

                     <div class="col-lg-12">
                    <div class="breadcrumb-main d-flex justify-content-between align-items-center">
                        <h2 class="breadcrumb-title">Category List</h2>
                       <div class="d-flex justify-content-end">
                         <button class="btn btn-primary btn-squared me-2" data-bs-toggle="modal" data-bs-target="#modal-basic">
                            Add Category <i class="fa-solid fa-plus ms-2"></i>
                        </button>

                         <button class="btn btn-primary " id="toggleFilter">
                         Advance Filter  <i class="fas fa-filter ms-2"></i>
                       </button>
                       </div>
                    </div>
                  </div>
                       <div>
                        <div class="card card-default filter-card  p-3 mb-3">
                           <form id="searchForm">
                                <div class="row g-3">
                                    <!-- Name -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="il-gray fs-14 fw-500 align-center mb-10">Search By Category Name</label>
                                            <input type="text" name="name" placeholder="Enter Catergory Name...." id="searchName" 
                                                   class="form-control ih-medium ip-gray radius-xs b-light px-15">
                                        </div>
                                    </div>

                                    <!-- Category -->
                                    <div class="col-md-4">
                                        <label class="il-gray fs-14 fw-500 align-center mb-10">Type</label>
                                        <div class="mb-25 select-style2">
                                            <select name="type" id="searchType" class="form-control ih-medium ip-light radius-xs b-light px-15">
                                                <option value="">Select an Option</option>
                                                <option value="1">Class</option>
                                                <option value="2">Gallery</option>
                                                <option value="3">Occupation</option>
                                                <option value="4">Blog</option>
                                                <option value="5">News & Events</option>
                                                <option value="6">About Us</option>
                                                <option value="7">About Us Data</option>
                                                <option value="8">Publications & Reports</option>
                                                <option value="9">Education Level</option>
                                                <option value="10">Marital Status Type</option>
                                                <option value="11">Insitute Type</option>
                                                <option value="12">Literacy</option> 
                                                <option value="13">Insitute User Type</option> 
                                                <option value="14">Department</option> 
                                                <option value="15">Profile Type</option> 
                                                <option value="16">Staff Profile Type</option>
                                                <option value="17">Designation</option> 
                                                <option value="18">Syallbus</option> 
                                                <option value="19">Staff Status</option> 
                                            </select>
                                        </div>
                                    </div>

                                    

                                </div>
                            </form>



                        </div>
                      </div>

                <div class="col-xxl-12">
                    <div class="userDatatable  global-shadow border-light-0 w-100 adv-table">
                        <div class="table-responsive">
                            <div id="filter-form-container"></div>
                            <table class="table mb-0 table-borderless  table-striped" 
                                data-sorting="true" data-filter-container="#filter-form-container" 
                                data-paging-current="1" data-paging-position="right" data-paging-size="10">
                                <thead>
                                    <tr class="userDatatable-header">
                                        <th><span class="userDatatable-title">S.No.</span></th>
                                        <th><span class="userDatatable-title">Image</span></th>
                                        <th><span class="userDatatable-title">Name</span></th>
                                        <th><span class="userDatatable-title">Type</span></th>
                                        <th><span class="userDatatable-title d-flex justify-content-end">Action</span></th>
                                    </tr>
                                </thead>
                                <tbody id="dataBody">
                                    @foreach($data as $key => $value)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>
                                            @if($value->file)
                                                <img src="{{ url('/') }}/{{ $value->file }}" width="60" height="60" class="rounded">
                                            @else
                                                <span class="text-muted">No Image</span>
                                            @endif
                                        </td>
                                        <td>{{ $value->name }}</td>
                                        <td>{{ category_type($value->type) }}</td>
                                        <td>
                                            <ul class="orderDatatable_actions mb-0 d-flex flex-wrap">
                                                <li>
                                                    <a href="javascript:void(0)" 
                                                       class="edit text-success edit-category-btn"
                                                       data-id="{{ $value->id }}"
                                                       data-name="{{ $value->name }}"
                                                       data-type="{{ $value->type }}"
                                                       data-file="{{ $value->file }}"
                                                       data-aboutus="{{ $value->about_us_file ?? '' }}"
                                                       title="Edit">
                                                        <i class="fas fa-pen"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <form action="{{ route('category.destroy', $value->id) }}" method="POST" style="display:inline;">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="text-danger mx-2" 
                                                                onclick="return confirm('Are you sure you want to delete this banner?');">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                                <div id="paginationLinks">
                                    {{ $data->links('pagination::bootstrap-4') }}
                                </div>

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

        <!-- Modal -->
        <div class="modal fade" id="modal-basic" tabindex="-1" aria-labelledby="modalBasicLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content modal-bg-white">
                    <div class="modal-header">
                        <h3 class="modal-title">Create Category</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="categoryForm" class="p-3" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="category_id" id="category_id">
                            <div class="row">
                                <!-- Name -->
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="category_name" class="il-gray fs-14 fw-500 align-center mb-10">
                                            Name <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" id="category_name" name="name"
                                            class="form-control ih-medium ip-light radius-xs b-light px-15"
                                            placeholder="Enter Category Name">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="category_type" class="il-gray fs-14 fw-500 align-center mb-10">Type</label>
                                        <select name="type" id="category_type" class="form-control ih-medium ip-light radius-xs b-light px-15" required>
                                               <option value="">Select an Option</option>
                                                <option value="1">Class</option>
                                                <option value="2">Gallery</option>
                                                <option value="3">Occupation</option>
                                                <option value="4">Blog</option>
                                                <option value="5">News & Events</option>
                                                <option value="6">About Us</option>
                                                <option value="7">About Us Data</option>
                                                <option value="8">Publications & Reports</option>
                                                <option value="9">Education Level</option>
                                                <option value="10">Marital Status Type</option>
                                                <option value="11">Insitute Type</option>
                                                <option value="12">Literacy</option> 
                                                <option value="13">Insitute User Type</option> 
                                                <option value="14">Department</option> 
                                                <option value="15">Profile Type</option> 
                                                <option value="16">Staff Profile Type</option>
                                                <option value="17">Designation</option> 
                                                <option value="18">Syallbus</option> 
                                                <option value="19">Staff Status</option> 
                                        </select>
                                    </div>
                                </div>
                                <!-- About Us File -->
                                <div class="col-md-6 d-none" id="about_us_file_div">
                                    <div class="form-group">
                                        <label for="about_us_file" class="il-gray fs-14 fw-500 align-center mb-10">
                                            Upload File (For About Us) <span class="text-danger">*</span>
                                        </label>
                                        <input type="file" id="about_us_file" name="about_us_file"
                                            class="form-control">
                                        <div id="about_us_preview" class="mt-2"></div>
                                    </div>
                                </div>
                                <!-- Submit -->
                                <div class="col-md-12 text-center mt-3">
                                    <button type="submit" id="categorySubmit"
                                        class="btn btn-primary btn-default  w-100">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- Scripts --}}
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            $(function () {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                // Reset modal for create
                $('[data-bs-target="#modal-basic"]').on('click', function () {
                    $('#modal-basic .modal-title').text('Create Category');
                    $('#categoryForm')[0].reset();
                    $('#category_id').val('');
                    $('#categorySubmit').text('Save');
                    $('#image_preview').html('');
                    $('#about_us_preview').html('');
                    $('#about_us_file_div').addClass("d-none");
                });

                // Image live preview
                $(document).on("change", "#category_image", function () {
                    let reader = new FileReader();
                    reader.onload = (e) => {
                        $("#image_preview").html(`<img src="${e.target.result}" width="100" height="100" class="rounded">`);
                    };
                    reader.readAsDataURL(this.files[0]);
                });

                // Edit button click
                $(document).on('click', '.edit-category-btn', function () {
                    const id = $(this).data('id');
                    const name = $(this).data('name');
                    const type = $(this).data('type');
                    const file = $(this).data('file');
                    const aboutus = $(this).data('aboutus');

                    $('#modal-basic .modal-title').text('Edit Category');
                    $('#category_id').val(id);
                    $('#category_name').val(name);
                    $('#category_type').val(type).trigger('change');
                    $('#categorySubmit').text('Update');

                    if (file) {
                        $("#about_us_preview").html(`<img src="/${file}" width="100" height="100" class="rounded">`);
                    } else {
                        $("#about_us_preview").html('');
                    }

                

                    $('#modal-basic').modal('show');
                });

                // Submit form
                $('#categoryForm').on('submit', function (e) {
                    e.preventDefault();

                    const id = $('#category_id').val();
                    const url = id ? `category/${id}` : 'category';

                    let formData = new FormData(this);
                    if (id) formData.append('_method', 'PUT');

                    $.ajax({
                        url: url,
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function () {
                            $('#modal-basic').modal('hide');
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: id ? 'Category updated successfully!' : 'Category created successfully!',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => location.reload());
                        },
                        error: function (xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: xhr.responseJSON?.message || 'Something went wrong!'
                            });
                        }
                    });
                });

                $(document).on('change', '#category_type', function () {
                    if ($(this).val() == "6" || $(this).val() === "7") {
                        $("#about_us_file_div").removeClass("d-none");
                    } else {
                        $("#about_us_file_div").addClass("d-none");
                        $("#about_us_file").val("");
                        $("#about_us_preview").html("");
                    }
                });
                $("#toggleFilter").click(function(){
                    $(".filter-card").slideToggle("fast");
                });
                  function fetchData(page = 1) {
                    let name = $('#searchName').val();
                    let type = $('#searchType').val();
                    let date = $('#searchDate').val();

                    $.ajax({
                        url: "{{ route('search-data') }}?page=" + page,
                        type: "GET",
                        data: { name:name, type:type, date:date },
                        success: function(res) {
                            $('#dataBody').html(res.html);
                            $('#paginationLinks').html(res.pagination);
                        }
                    });
                }

                $('#searchName, #searchType, #searchDate').on('input change', function() {
                    fetchData();
                });

                $(document).on('click', '#paginationLinks a', function(e) {
                    e.preventDefault();
                    let page = $(this).attr('href').split('page=')[1];
                    fetchData(page);
                });

            });
        </script>

    </div>
</div>
@endsection