@extends('user.layouts')

@section('title', 'Category')

@section('header')

<link rel="stylesheet" type="text/css"
    href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">

<link rel="stylesheet" type="text/css"
    href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">

<link rel="stylesheet" type="text/css"
    href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">

<style>
    /* =========================================================
       PAGE
    ========================================================= */

    .category-page {
        padding-top: 22px;
        padding-bottom: 35px;
    }

    .category-page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 20px;
    }

    .category-page-title {
        margin: 0;
        color: #1f2937;
        font-size: 25px;
        font-weight: 700;
    }

    .category-page-subtitle {
        margin: 5px 0 0;
        color: #94a3b8;
        font-size: 11px;
    }

    .category-count-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 13px;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        background: #fff;
        color: #64748b;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }


    /* =========================================================
       CREATE CATEGORY
    ========================================================= */

    .create-category-card {
        overflow: hidden;
        margin-bottom: 22px;
        border: 1px solid #e5eaf0;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 4px 15px rgba(15, 23, 42, .04);
    }

    .create-card-header {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 16px 20px;
        border-bottom: 1px solid #edf1f5;
    }

    .create-header-icon {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 9px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 13px;
    }

    .create-card-title {
        margin: 0;
        color: #1f2937;
        font-size: 14px;
        font-weight: 700;
    }

    .create-card-subtitle {
        margin: 3px 0 0;
        color: #94a3b8;
        font-size: 9.5px;
    }

    .create-card-body {
        padding: 20px;
    }

    .category-form-label {
        display: block;
        margin-bottom: 7px;
        color: #475569;
        font-size: 10px;
        font-weight: 700;
    }

    .required-star {
        margin-left: 2px;
        color: #ef4444;
    }

    .category-input {
        height: 41px !important;
        padding: 8px 12px !important;
        border: 1px solid #dfe5ec !important;
        border-radius: 8px !important;
        background: #fff;
        color: #334155;
        font-size: 11px !important;
        box-shadow: none !important;
    }

    .category-input:focus {
        border-color: #7aa7f7 !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .07) !important;
    }

    .category-input.is-invalid {
        border-color: #ef4444 !important;
    }


    /* =========================================================
       UPLOAD
    ========================================================= */

    .category-upload-wrapper {
        position: relative;
        min-height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 18px;
        border: 1.5px dashed #cbd5e1;
        border-radius: 10px;
        background: #fafcff;
        cursor: pointer;
        transition: .2s ease;
    }

    .category-upload-wrapper:hover {
        border-color: #7aa7f7;
        background: #f7faff;
    }

    .category-upload-wrapper.upload-error {
        border-color: #ef4444;
        background: #fffafa;
    }

    .upload-content {
        width: 100%;
        text-align: center;
    }

    .upload-icon-box {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 9px;
        border-radius: 10px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 15px;
    }

    .upload-title {
        margin: 0 0 4px;
        color: #334155;
        font-size: 11px;
        font-weight: 700;
    }

    .upload-help {
        margin: 0;
        color: #94a3b8;
        font-size: 9px;
    }

    .upload-help strong {
        color: #64748b;
        font-weight: 700;
    }

    .category-create-preview {
        display: none;
        width: 100px;
        height: 100px;
        margin: auto;
        border-radius: 9px;
        object-fit: contain;
        background: #fff;
    }

    .change-image-text {
        display: none;
        margin-top: 8px;
        color: #2563eb;
        font-size: 9px;
        font-weight: 700;
        text-align: center;
    }

    .inline-error {
        min-height: 17px;
        margin-top: 5px;
        color: #dc2626;
        font-size: 9px;
        font-weight: 500;
    }


    /* =========================================================
       SEPARATE ADD ACTION
    ========================================================= */

    .create-action-section {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid #edf1f5;
    }

    .add-category-btn {
        min-width: 145px;
        height: 39px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border: 1px solid #2563eb;
        border-radius: 8px;
        background: #2563eb;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
    }

    .add-category-btn:hover,
    .add-category-btn:focus {
        border-color: #1d4ed8;
        background: #1d4ed8;
        color: #fff;
    }

    .add-category-btn:disabled {
        opacity: .7;
        cursor: not-allowed;
    }


    /* =========================================================
       LIST CARD
    ========================================================= */

    .category-list-card {
        overflow: hidden;
        border: 1px solid #e5eaf0;
        border-radius: 13px;
        background: #fff;
        box-shadow: 0 4px 15px rgba(15, 23, 42, .04);
    }

    .category-list-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 15px 18px;
        border-bottom: 1px solid #edf1f5;
    }

    .category-list-title {
        margin: 0;
        color: #1f2937;
        font-size: 13px;
        font-weight: 700;
    }

    .category-list-subtitle {
        margin: 3px 0 0;
        color: #94a3b8;
        font-size: 9px;
    }

    .category-list-body {
        padding: 15px 18px 17px;
    }


    /* =========================================================
       DATATABLE
    ========================================================= */

    .dataTables_wrapper {
        width: 100%;
    }

    .dataTables_wrapper > .row:first-child {
        margin-bottom: 12px !important;
        align-items: center !important;
    }

    .dataTables_wrapper > .row:last-child {
        margin-top: 12px !important;
        align-items: center !important;
    }

    .dataTables_filter {
        margin: 0 !important;
    }

    .dataTables_filter label {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        margin: 0 !important;
        color: #64748b;
        font-size: 9px;
    }

    .dataTables_filter input {
        width: 190px !important;
        height: 36px !important;
        margin-left: 0 !important;
        padding: 6px 10px !important;
        border: 1px solid #dfe5ec !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        font-size: 10px !important;
    }


    /* =========================================================
       SHOW ENTRIES FIX
    ========================================================= */

    .dataTables_length {
        margin: 0 !important;
    }

    .dataTables_length label {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        color: #64748b !important;
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    .dataTables_length select.form-select,
    .dataTables_length select {
        width: 80px !important;
        min-width: 80px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 6px 32px 6px 11px !important;
        border: 1px solid #dfe5ec !important;
        border-radius: 8px !important;
        background-position: right 10px center !important;
        background-size: 11px 9px !important;
        color: #334155 !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        box-shadow: none !important;
        cursor: pointer;
    }


    /* =========================================================
       TABLE
    ========================================================= */

    .category-table-responsive {
        width: 100%;
        overflow-x: auto;
    }

    #data-table {
        width: 100% !important;
        margin: 0 !important;
        border-collapse: collapse !important;
    }

    #data-table thead th {
        padding: 11px 12px !important;
        border: 1px solid #e5eaf0 !important;
        background: #f6f8fb !important;
        color: #334155 !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        vertical-align: middle !important;
        white-space: nowrap;
    }

    #data-table tbody td {
        padding: 10px 12px !important;
        border: 1px solid #edf1f5 !important;
        color: #475569;
        font-size: 10px !important;
        vertical-align: middle !important;
    }

    #data-table tbody tr:hover {
        background: #fbfdff;
    }

    .serial-badge {
        width: 27px;
        height: 27px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px;
        background: #f1f5f9;
        color: #64748b;
        font-size: 9px;
        font-weight: 700;
    }

    .category-name-text {
        color: #334155;
        font-weight: 700;
    }

    .category-date {
        color: #64748b;
        font-size: 9px;
    }


    /* =========================================================
       CLICKABLE IMAGE
    ========================================================= */

    .category-image-button {
        width: 46px;
        height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 0;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #f8fafc;
        cursor: pointer;
        transition: .2s ease;
    }

    .category-image-button:hover {
        border-color: #93b4f4;
        box-shadow: 0 3px 10px rgba(37, 99, 235, .12);
        transform: translateY(-1px);
    }

    .preview-td-img {
        width: 100%;
        height: 100%;
        padding: 4px;
        object-fit: contain;
    }

    .no-image {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: #94a3b8;
        font-size: 9px;
    }


    /* =========================================================
       ACTIONS
    ========================================================= */

    .category-actions {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .category-action-btn {
        width: 31px;
        height: 31px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 7px !important;
        background: #fff !important;
        font-size: 10px;
        transition: .2s ease;
    }

    .category-action-btn:hover {
        background: #f8fafc !important;
    }

    .edit-action {
        color: #2563eb !important;
    }

    .visibility-action {
        color: #d97706 !important;
    }

    .delete-action {
        color: #dc2626 !important;
    }


    /* =========================================================
       DATATABLE FOOTER
    ========================================================= */

    .dataTables_info {
        padding-top: 0 !important;
        color: #64748b !important;
        font-size: 9px !important;
    }

    .dataTables_paginate {
        padding-top: 0 !important;
    }

    .dataTables_paginate .pagination {
        margin: 0 !important;
        justify-content: flex-end;
    }

    .dataTables_paginate .page-link {
        min-width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 7px !important;
        font-size: 9px;
    }


    /* =========================================================
       MODAL
    ========================================================= */

    .category-modal-content {
        overflow: hidden;
        border: 0;
        border-radius: 13px;
        box-shadow: 0 18px 50px rgba(15, 23, 42, .15);
    }

    .category-modal-header {
        padding: 14px 17px;
        border-bottom: 1px solid #edf1f5;
    }

    .category-modal-title {
        margin: 0;
        color: #1f2937;
        font-size: 14px;
        font-weight: 700;
    }

    .category-modal-body {
        padding: 18px;
    }

    .edit-upload-wrapper {
        min-height: 120px;
        padding: 15px;
        border: 1.5px dashed #cbd5e1;
        border-radius: 9px;
        background: #fafcff;
    }

    .edit-category-preview {
        max-width: 110px;
        max-height: 110px;
        object-fit: contain;
        border-radius: 8px;
    }

    .edit-upload-help {
        margin: 4px 0 0;
        color: #94a3b8;
        font-size: 9px;
    }

    .modal-update-btn {
        width: 100%;
        height: 39px;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 700;
    }


    /* =========================================================
       IMAGE VIEW MODAL
    ========================================================= */

    .image-preview-modal .modal-dialog {
        max-width: 540px;
    }

    .image-preview-area {
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: #f8fafc;
    }

    #categoryImagePreview {
        max-width: 100%;
        max-height: 450px;
        object-fit: contain;
        border-radius: 9px;
    }


    /* =========================================================
       DARK MODE
    ========================================================= */

    body.dark-mode .create-category-card,
    body.dark-mode .category-list-card,
    body.dark-mode .category-count-badge,
    body.dark-mode .category-modal-content {
        border-color: #2b374a;
        background: #172033;
    }

    body.dark-mode .create-card-header,
    body.dark-mode .category-list-header,
    body.dark-mode .create-action-section,
    body.dark-mode .category-modal-header {
        border-color: #2b374a;
    }

    body.dark-mode .category-page-title,
    body.dark-mode .create-card-title,
    body.dark-mode .category-list-title,
    body.dark-mode .category-modal-title,
    body.dark-mode .category-name-text {
        color: #f1f5f9;
    }

    body.dark-mode .category-input,
    body.dark-mode .dataTables_filter input,
    body.dark-mode .dataTables_length select {
        border-color: #334155 !important;
        background-color: #111827 !important;
        color: #e2e8f0 !important;
    }

    body.dark-mode .category-upload-wrapper,
    body.dark-mode .edit-upload-wrapper,
    body.dark-mode .image-preview-area {
        border-color: #334155;
        background: #111827;
    }

    body.dark-mode #data-table thead th {
        border-color: #334155 !important;
        background: #111827 !important;
        color: #cbd5e1 !important;
    }

    body.dark-mode #data-table tbody td {
        border-color: #2b374a !important;
        color: #cbd5e1;
    }


    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 767px) {
        .category-page-header,
        .category-list-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .category-page-title {
            font-size: 21px;
        }

        .create-card-body,
        .category-list-body {
            padding: 14px;
        }

        .create-action-section {
            justify-content: stretch;
        }

        .add-category-btn {
            width: 100%;
        }

        .dataTables_length {
            margin-bottom: 10px !important;
        }

        .dataTables_filter label {
            align-items: flex-start;
            flex-direction: column;
        }

        .dataTables_filter input {
            width: 100% !important;
        }

        .dataTables_paginate .pagination {
            justify-content: flex-start;
            margin-top: 10px !important;
        }
    }


    /* ===== Readability + modal create layout overrides ===== */
    .category-page-title{font-size:28px!important;}
    .category-page-subtitle{font-size:13px!important;}
    .category-header-actions{display:flex;align-items:center;gap:10px;}
    .category-count-badge{min-height:40px;padding:8px 15px;font-size:12px!important;}
    .open-create-category-btn{height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 17px;border:1px solid #2563eb;border-radius:8px;background:#2563eb;color:#fff;font-size:13px;font-weight:600;}
    .open-create-category-btn:hover,.open-create-category-btn:focus{background:#1d4ed8;border-color:#1d4ed8;color:#fff;}
    .category-list-title{font-size:16px!important;}
    .category-list-subtitle{font-size:12px!important;}
    .category-form-label{font-size:13px!important;margin-bottom:8px;}
    .category-input{height:45px!important;font-size:13px!important;}
    .category-input::placeholder{font-size:12px;}
    .inline-error{font-size:11px!important;}
    .upload-title{font-size:13px!important;}
    .upload-help,.edit-upload-help{font-size:11px!important;}
    #data-table thead th{font-size:12px!important;padding:13px 14px!important;}
    #data-table tbody td{font-size:12px!important;padding:12px 14px!important;}
    .category-name-text,.category-date{font-size:12px!important;}
    .dataTables_length label,.dataTables_filter label{font-size:12px!important;}
    .dataTables_length select.form-select,.dataTables_length select{width:85px!important;min-width:85px!important;height:39px!important;padding:6px 32px 6px 11px!important;background-position:right 10px center!important;font-size:12px!important;}
    .dataTables_filter input{height:39px!important;font-size:12px!important;}
    .dataTables_info,.dataTables_paginate .page-link{font-size:11px!important;}
    #CreateCategoryModal .modal-dialog{max-width:760px;}
    .category-create-modal-body{padding:24px;}
    .create-modal-subtitle{color:#94a3b8;font-size:12px;}
    #CreateCategoryModal .create-action-section{margin-top:20px;}
    #CreateCategoryModal .add-category-btn{font-size:12px!important;height:42px;}
    @media(max-width:767px){.category-header-actions{width:100%;justify-content:space-between;}.open-create-category-btn{flex:1;}#CreateCategoryModal .modal-dialog{margin:12px;}.category-create-modal-body{padding:17px;}}
</style>

@endsection


@section('content')

<div class="container-fluid page-wrapper category-page">

    {{-- =====================================================
         PAGE HEADER
    ====================================================== --}}

    <div class="category-page-header">

        <div>
            <h3 class="category-page-title">
                Category Management
            </h3>

            <p class="category-page-subtitle">
                Create and manage business categories
            </p>
        </div>

        <div class="category-header-actions">
            <div class="category-count-badge">
                <i class="fa-solid fa-layer-group"></i>
                <span>{{ count($category_list) }} Categories</span>
            </div>

            <button type="button" class="btn open-create-category-btn"
                data-bs-toggle="modal" data-bs-target="#CreateCategoryModal">
                <i class="fa-solid fa-plus"></i> Add Category
            </button>
        </div>

    </div>


    {{-- =====================================================
         CATEGORY LIST
    ====================================================== --}}

    <div class="category-list-card">

        <div class="category-list-header">

            <div>

                <h5 class="category-list-title">
                    Category List
                </h5>

                <p class="category-list-subtitle">
                    View and manage all categories
                </p>

            </div>

        </div>


        <div class="category-list-body">

            <div class="category-table-responsive">

                <table
                    id="data-table"
                    class="table align-middle"
                    style="width:100%">

                    <thead>

                        <tr>

                            <th>SN</th>

                            <th>CATEGORY NAME</th>

                            <th>CATEGORY NAME IN MALAYALAM</th>

                            <th>PREVIEW</th>

                            <th>CREATED DATE</th>

                            <th>ACTION</th>

                        </tr>

                    </thead>


                    <tbody>

                        @foreach ($category_list as $category)

                            <tr>

                                {{-- SN --}}
                                <td>

                                    <span class="serial-badge">
                                        {{ $loop->iteration }}
                                    </span>

                                </td>


                                {{-- NAME --}}
                                <td>

                                    <span class="category-name-text">
                                        {{ $category->category_name }}
                                    </span>

                                </td>


                                {{-- MALAYALAM --}}
                                <td>
                                    {{ $category->category_name_malayalam }}
                                </td>


                                {{-- IMAGE --}}
                                <td>

                                    @if ($category->image)

                                        <button
                                            type="button"
                                            class="category-image-button"
                                            data-bs-toggle="modal"
                                            data-bs-target="#categoryImageModal"
                                            data-image="{{ asset($category->image) }}"
                                            data-name="{{ $category->category_name }}"
                                            title="Click to view image">

                                            <img
                                                src="{{ asset($category->image) }}"
                                                class="preview-td-img"
                                                alt="{{ $category->category_name }}">

                                        </button>

                                    @else

                                        <span class="no-image">

                                            <i class="fa-regular fa-image"></i>

                                            No Image

                                        </span>

                                    @endif

                                </td>


                                {{-- DATE --}}
                                <td
                                    data-order="{{ optional($category->created_at)->timestamp ?? 0 }}">

                                    <span class="category-date">

                                        {{ optional($category->created_at)->format('d-m-Y') ?? '-' }}

                                    </span>

                                </td>


                                {{-- ACTION --}}
                                <td>

                                    <div class="category-actions">

                                        {{-- EDIT --}}
                                        <button
                                            type="button"
                                            class="btn category-action-btn edit-action updatebtn"
                                            data-user-id="{{ $category->id }}"
                                            title="Edit">

                                            <i class="fa-regular fa-pen-to-square"></i>

                                        </button>


                                        {{-- HIDE / UNHIDE --}}
                                        <button
                                            type="button"
                                            data-bs-toggle="modal"
                                            data-bs-target="#Hide2Modal"
                                            class="btn category-action-btn visibility-action"
                                            data-user-id="{{ $category->id }}"
                                            onclick="setCategoryId(this)"
                                            title="{{ $category->is_active == 0 ? 'Unhide' : 'Hide' }}">

                                            @if ($category->is_active == 0)

                                                <i class="fa-regular fa-eye-slash"></i>

                                            @else

                                                <i class="fa-regular fa-eye"></i>

                                            @endif

                                        </button>


                                        {{-- DELETE --}}
                                        <button
                                            type="button"
                                            data-bs-toggle="modal"
                                            data-bs-target="#Delete2Modal"
                                            class="btn category-action-btn delete-action"
                                            data-user-id="{{ $category->id }}"
                                            onclick="setDeleteId(this)"
                                            title="Delete">

                                            <i class="fa-regular fa-trash-can"></i>

                                        </button>

                                    </div>

                                </td>

                            </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>



{{-- =========================================================
     CREATE CATEGORY MODAL
========================================================= --}}
<div class="modal fade" id="CreateCategoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content category-modal-content">
            <div class="modal-header category-modal-header">
                <div class="d-flex align-items-center gap-3">
                    <div class="create-header-icon"><i class="fa-solid fa-plus"></i></div>
                    <div>
                        <h5 class="category-modal-title mb-1">Create Category</h5>
                        <p class="create-modal-subtitle mb-0">Enter category details and select an icon</p>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="category-create-modal-body">
<form
                        action="{{ route('add_category') }}"
                        method="POST"
                        enctype="multipart/form-data"
                        id="categoryForm"
                        novalidate>

                        @csrf


                        <div class="row g-3">

                            {{-- CATEGORY NAME --}}
                            <div class="col-md-6">

                                <label
                                    for="category_name"
                                    class="category-form-label">

                                    Category Name

                                    <span class="required-star">*</span>

                                </label>

                                <input
                                    type="text"
                                    name="category_name"
                                    id="category_name"
                                    value="{{ old('category_name') }}"
                                    class="form-control category-input"
                                    placeholder="Enter category name">

                                <div
                                    id="categoryNameError"
                                    class="inline-error">

                                    @error('category_name')
                                        {{ $message }}
                                    @enderror

                                </div>

                            </div>


                            {{-- MALAYALAM --}}
                            <div class="col-md-6">

                                <label
                                    for="cat_name"
                                    class="category-form-label">

                                    Category Name in Malayalam

                                    <span class="required-star">*</span>

                                </label>

                                <input
                                    type="text"
                                    name="cat_name"
                                    id="cat_name"
                                    value="{{ old('cat_name') }}"
                                    class="form-control category-input"
                                    placeholder="വിഭാഗം">

                                <div
                                    id="malayalamNameError"
                                    class="inline-error">

                                    @error('cat_name')
                                        {{ $message }}
                                    @enderror

                                </div>

                            </div>


                            {{-- IMAGE --}}
                            <div class="col-12">

                                <label
                                    for="upload-category-icon"
                                    class="category-form-label">

                                    Category Icon

                                    <span class="required-star">*</span>

                                </label>


                                <div
                                    class="category-upload-wrapper"
                                    id="category-upload-wrapper"
                                    role="button"
                                    tabindex="0">

                                    <div
                                        id="icon-upload-conditions"
                                        class="upload-content">

                                        <div class="upload-icon-box">
                                            <i class="fa-solid fa-cloud-arrow-up"></i>
                                        </div>

                                        <p class="upload-title">
                                            Click to choose an image
                                        </p>

                                        <p class="upload-help">
                                            <strong>JPG, JPEG or PNG</strong>
                                            &nbsp;•&nbsp; Max 2 MB
                                        </p>

                                    </div>


                                    <div
                                        id="create-preview-wrapper"
                                        class="text-center"
                                        style="display:none;">

                                        <img
                                            src=""
                                            id="category-icon-view"
                                            class="category-create-preview"
                                            alt="Category icon preview">

                                        <div
                                            id="change-image-text"
                                            class="change-image-text">

                                            <i class="fa-solid fa-pen me-1"></i>
                                            Click to change image

                                        </div>

                                    </div>


                                    <input
                                        type="file"
                                        name="image"
                                        id="upload-category-icon"
                                        accept=".jpg,.jpeg,.png,image/jpeg,image/png"
                                        style="display:none;">

                                </div>


                                <div
                                    id="imageError"
                                    class="inline-error">

                                    @error('image')
                                        {{ $message }}
                                    @enderror

                                </div>

                            </div>

                        </div>


                        {{-- SEPARATE ADD ACTION --}}
                        <div class="create-action-section">

                            <button
                                type="submit"
                                id="categoryBtn"
                                class="btn add-category-btn">

                                <i class="fa-solid fa-plus"></i>

                                Add Category

                            </button>

                        </div>

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

{{-- =========================================================
     IMAGE PREVIEW MODAL
========================================================= --}}

<div
    class="modal fade image-preview-modal"
    id="categoryImageModal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content category-modal-content">

            <div class="modal-header category-modal-header">

                <h5
                    class="category-modal-title"
                    id="categoryImageTitle">

                    Category Image

                </h5>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close">
                </button>

            </div>


            <div class="modal-body p-0">

                <div class="image-preview-area">

                    <img
                        id="categoryImagePreview"
                        src=""
                        alt="Category image">

                </div>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     EDIT CATEGORY MODAL
========================================================= --}}

<div
    class="modal fade zoom-in"
    id="EditCategoryModal"
    tabindex="-1"
    aria-labelledby="editCategoryModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content category-modal-content">

            <div class="modal-header category-modal-header">

                <h5
                    class="category-modal-title"
                    id="editCategoryModalLabel">

                    Edit Category

                </h5>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close">
                </button>

            </div>


            <div class="modal-body category-modal-body">

                <form
                    action="{{ route('update_category') }}"
                    method="POST"
                    enctype="multipart/form-data"
                    id="editCategoryForm">

                    @csrf


                    <input
                        type="hidden"
                        id="cat-id"
                        name="ucategory_id"
                        value="{{ old('ucategory_id') }}">


                    {{-- CATEGORY NAME --}}
                    <div class="mb-3">

                        <label
                            for="cat-name"
                            class="category-form-label">

                            Category Name

                            <span class="required-star">*</span>

                        </label>

                        <input
                            type="text"
                            class="form-control category-input"
                            id="cat-name"
                            name="ucategory_name"
                            value="{{ old('ucategory_name') }}"
                            placeholder="Category Name"
                            required>

                    </div>


                    {{-- MALAYALAM --}}
                    <div class="mb-3">

                        <label
                            for="caty-name"
                            class="category-form-label">

                            Category Name in Malayalam

                            <span class="required-star">*</span>

                        </label>

                        <input
                            type="text"
                            class="form-control category-input"
                            id="caty-name"
                            name="ucategory_name_malayalam"
                            value="{{ old('ucategory_name_malayalam') }}"
                            placeholder="Category name in Malayalam"
                            required>

                    </div>


                    {{-- IMAGE --}}
                    <div class="mb-3">

                        <label
                            for="edit-category-image"
                            class="category-form-label">

                            Category Icon

                        </label>


                        <div
                            id="update-category-icon-wrapper"
                            class="edit-upload-wrapper">


                            {{-- PREVIEW --}}
                            <div
                                id="edit-image-preview-wrapper"
                                class="text-center mb-3"
                                style="display:none;">

                                <img
                                    src=""
                                    id="edit-category-icon"
                                    alt="Category Icon"
                                    class="edit-category-preview">

                            </div>


                            {{-- PLACEHOLDER --}}
                            <div
                                id="edit-upload-placeholder"
                                class="text-center mb-3">

                                <div class="upload-icon-box">

                                    <i class="fa-solid fa-cloud-arrow-up"></i>

                                </div>

                                <p class="upload-title">
                                    Choose a new category icon
                                </p>

                                <p class="edit-upload-help">
                                    JPG, JPEG or PNG • Max 2 MB
                                </p>

                            </div>


                            <input
                                type="file"
                                id="edit-category-image"
                                name="uimage"
                                class="form-control category-input"
                                accept=".jpg,.jpeg,.png,image/jpeg,image/png">

                            <div
                                id="editImageError"
                                class="inline-error">
                            </div>

                        </div>

                    </div>


                    <button
                        type="submit"
                        id="updateCategoryBtn"
                        class="btn btn-primary modal-update-btn">

                        <i class="fa-solid fa-arrows-rotate me-2"></i>

                        Update Category

                    </button>

                </form>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     HIDE / UNHIDE MODAL
========================================================= --}}

<div
    class="modal fade zoom-in"
    id="Hide2Modal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content category-modal-content">

            <div class="modal-body p-4">

                <div class="text-center">

                    <img
                        class="mb-3"
                        src="{{ asset('/assets/images/icons/hide.svg') }}"
                        alt="Hide"
                        style="width:55px;">

                    <h5 class="category-modal-title mb-2">
                        Change Category Visibility
                    </h5>

                    <p class="text-muted mb-4" style="font-size:10px;">
                        Are you sure you want to hide/unhide this category?
                    </p>

                </div>


                <form
                    action="{{ route('hide_category') }}"
                    method="POST"
                    id="hideCategoryForm">

                    @csrf

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


                    <div class="d-flex align-items-center justify-content-center gap-2">

                        <button
                            type="button"
                            class="btn btn-light"
                            data-bs-dismiss="modal">

                            Cancel

                        </button>


                        <button
                            type="submit"
                            id="hideCategoryBtn"
                            class="btn btn-primary">

                            <i class="fa-regular fa-circle-check me-2"></i>

                            Yes

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>


{{-- =========================================================
     DELETE MODAL
========================================================= --}}

<div
    class="modal fade zoom-in"
    id="Delete2Modal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content category-modal-content">

            <div class="modal-body p-4">

                <div class="text-center">

                    <img
                        class="mb-3"
                        src="{{ asset('/assets/images/icons/delete-icon.svg') }}"
                        alt="Delete"
                        style="width:55px;">

                    <h5 class="category-modal-title mb-2">
                        Delete Category
                    </h5>

                    <p class="text-muted mb-4" style="font-size:10px;">
                        Are you sure you want to delete this category?
                    </p>

                </div>


                <form
                    action="{{ route('delete_category') }}"
                    method="POST"
                    id="deleteCategoryForm">

                    @csrf

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


                    <div class="d-flex align-items-center justify-content-center gap-2">

                        <button
                            type="button"
                            class="btn btn-light"
                            data-bs-dismiss="modal">

                            Cancel

                        </button>


                        <button
                            type="submit"
                            id="deleteCategoryBtn"
                            class="btn btn-danger">

                            <i class="fa-regular fa-trash-can me-2"></i>

                            Yes, Delete

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

@endsection


@section('footer')

{{-- =========================================================
     JQUERY
========================================================= --}}

<script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous">
</script>


{{-- =========================================================
     DATATABLE
========================================================= --}}

<script
    type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js">
</script>

<script
    type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js">
</script>

<script
    type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js">
</script>


<script>
    /* =========================================================
       CATEGORY IDS
    ========================================================= */

    function setCategoryId(button)
    {
        document.getElementById('category_id').value =
            button.getAttribute('data-user-id');
    }


    function setDeleteId(button)
    {
        document.getElementById('delete_id').value =
            button.getAttribute('data-user-id');
    }


    document.addEventListener('DOMContentLoaded', function () {

        /* =====================================================
           CREATE IMAGE
        ====================================================== */

        const createWrapper =
            document.getElementById('category-upload-wrapper');

        const createInput =
            document.getElementById('upload-category-icon');

        const createPreview =
            document.getElementById('category-icon-view');

        const createPreviewWrapper =
            document.getElementById('create-preview-wrapper');

        const createConditions =
            document.getElementById('icon-upload-conditions');

        const changeImageText =
            document.getElementById('change-image-text');

        const imageError =
            document.getElementById('imageError');


        function clearCreateImage()
        {
            createInput.value = '';

            createPreview.removeAttribute('src');

            createPreview.style.display = 'none';

            createPreviewWrapper.style.display = 'none';

            createConditions.style.display = 'block';

            changeImageText.style.display = 'none';
        }


        function validateImage(file, errorElement)
        {
            const allowedTypes = [
                'image/jpeg',
                'image/png'
            ];

            const maxSize =
                2 * 1024 * 1024;


            if (!allowedTypes.includes(file.type)) {

                errorElement.textContent =
                    'Please select a JPG, JPEG or PNG image.';

                return false;
            }


            if (file.size > maxSize) {

                errorElement.textContent =
                    'Image size must not exceed 2 MB.';

                return false;
            }


            errorElement.textContent = '';

            return true;
        }


        if (createWrapper && createInput) {

            createWrapper.addEventListener(
                'click',
                function () {

                    createInput.click();

                }
            );


            createWrapper.addEventListener(
                'keydown',
                function (event) {

                    if (
                        event.key === 'Enter' ||
                        event.key === ' '
                    ) {

                        event.preventDefault();

                        createInput.click();
                    }

                }
            );


            createInput.addEventListener(
                'change',
                function () {

                    imageError.textContent = '';

                    createWrapper.classList.remove(
                        'upload-error'
                    );


                    const file =
                        this.files[0];


                    if (!file) {

                        clearCreateImage();

                        return;
                    }


                    if (!validateImage(file, imageError)) {

                        clearCreateImage();

                        createWrapper.classList.add(
                            'upload-error'
                        );

                        return;
                    }


                    const reader =
                        new FileReader();


                    reader.onload =
                        function (event) {

                            createPreview.src =
                                event.target.result;

                            createPreview.style.display =
                                'block';

                            createPreviewWrapper.style.display =
                                'block';

                            createConditions.style.display =
                                'none';

                            changeImageText.style.display =
                                'block';

                        };


                    reader.readAsDataURL(file);

                }
            );

        }


        /* =====================================================
           CREATE FORM INLINE VALIDATION
        ====================================================== */

        const categoryForm =
            document.getElementById('categoryForm');

        const categoryBtn =
            document.getElementById('categoryBtn');

        const categoryName =
            document.getElementById('category_name');

        const malayalamName =
            document.getElementById('cat_name');

        const categoryNameError =
            document.getElementById('categoryNameError');

        const malayalamNameError =
            document.getElementById('malayalamNameError');


        function clearFieldError(input, error)
        {
            input.classList.remove('is-invalid');

            error.textContent = '';
        }


        categoryName.addEventListener(
            'input',
            function () {

                if (this.value.trim()) {

                    clearFieldError(
                        categoryName,
                        categoryNameError
                    );
                }

            }
        );


        malayalamName.addEventListener(
            'input',
            function () {

                if (this.value.trim()) {

                    clearFieldError(
                        malayalamName,
                        malayalamNameError
                    );
                }

            }
        );


        if (categoryForm && categoryBtn) {

            categoryForm.addEventListener(
                'submit',
                function (event) {

                    let valid = true;


                    clearFieldError(
                        categoryName,
                        categoryNameError
                    );

                    clearFieldError(
                        malayalamName,
                        malayalamNameError
                    );

                    imageError.textContent = '';

                    createWrapper.classList.remove(
                        'upload-error'
                    );


                    if (!categoryName.value.trim()) {

                        categoryName.classList.add(
                            'is-invalid'
                        );

                        categoryNameError.textContent =
                            'Please enter category name.';

                        valid = false;
                    }


                    if (!malayalamName.value.trim()) {

                        malayalamName.classList.add(
                            'is-invalid'
                        );

                        malayalamNameError.textContent =
                            'Please enter category name in Malayalam.';

                        valid = false;
                    }


                    if (
                        !createInput ||
                        createInput.files.length === 0
                    ) {

                        imageError.textContent =
                            'Please select a category image.';

                        createWrapper.classList.add(
                            'upload-error'
                        );

                        valid = false;

                    } else {

                        const file =
                            createInput.files[0];


                        if (!validateImage(file, imageError)) {

                            createWrapper.classList.add(
                                'upload-error'
                            );

                            valid = false;
                        }

                    }


                    if (!valid) {

                        event.preventDefault();

                        const firstError =
                            categoryForm.querySelector(
                                '.is-invalid, .upload-error'
                            );


                        if (firstError) {

                            firstError.scrollIntoView({
                                behavior: 'smooth',
                                block: 'center'
                            });
                        }

                        return;
                    }


                    categoryBtn.disabled = true;

                    categoryBtn.innerHTML =
                        '<i class="fa fa-spinner fa-spin"></i> Adding...';

                }
            );

        }


        /* =====================================================
           TABLE IMAGE PREVIEW
        ====================================================== */

        const categoryImageModal =
            document.getElementById('categoryImageModal');


        if (categoryImageModal) {

            categoryImageModal.addEventListener(
                'show.bs.modal',
                function (event) {

                    const button =
                        event.relatedTarget;


                    if (!button) {
                        return;
                    }


                    const image =
                        button.getAttribute('data-image');

                    const name =
                        button.getAttribute('data-name');


                    document.getElementById(
                        'categoryImagePreview'
                    ).src = image || '';


                    document.getElementById(
                        'categoryImageTitle'
                    ).textContent =
                        name
                            ? name + ' - Image'
                            : 'Category Image';

                }
            );


            categoryImageModal.addEventListener(
                'hidden.bs.modal',
                function () {

                    document.getElementById(
                        'categoryImagePreview'
                    ).src = '';

                }
            );

        }


        /* =====================================================
           EDIT CATEGORY
        ====================================================== */

        const editButtons =
            document.querySelectorAll('.updatebtn');

        const editModalElement =
            document.getElementById(
                'EditCategoryModal'
            );


        editButtons.forEach(
            function (button) {

                button.addEventListener(
                    'click',
                    function () {

                        const id =
                            this.getAttribute(
                                'data-user-id'
                            );


                        const editFileInput =
                            document.getElementById(
                                'edit-category-image'
                            );

                        const editImage =
                            document.getElementById(
                                'edit-category-icon'
                            );

                        const previewWrapper =
                            document.getElementById(
                                'edit-image-preview-wrapper'
                            );

                        const uploadPlaceholder =
                            document.getElementById(
                                'edit-upload-placeholder'
                            );


                        document.getElementById(
                            'cat-id'
                        ).value = '';

                        document.getElementById(
                            'cat-name'
                        ).value = '';

                        document.getElementById(
                            'caty-name'
                        ).value = '';


                        editFileInput.value = '';

                        editImage.removeAttribute('src');

                        previewWrapper.style.display =
                            'none';

                        uploadPlaceholder.style.display =
                            'block';


                        fetch('./get_category/' + id, {

                            method: 'GET',

                            headers: {

                                'Accept':
                                    'application/json',

                                'X-Requested-With':
                                    'XMLHttpRequest'

                            }

                        })
                        .then(function (response) {

                            if (!response.ok) {

                                throw new Error(
                                    'Unable to load category'
                                );
                            }

                            return response.json();

                        })
                        .then(function (response) {

                            document.getElementById(
                                'cat-id'
                            ).value =
                                response.cat_id ?? id;


                            document.getElementById(
                                'cat-name'
                            ).value =
                                response.cat_name ?? '';


                            document.getElementById(
                                'caty-name'
                            ).value =
                                response.cat_name_malayalam ?? '';


                            if (response.img) {

                                editImage.src =
                                    response.img;

                                previewWrapper.style.display =
                                    'block';

                                uploadPlaceholder.style.display =
                                    'none';

                            } else {

                                editImage.removeAttribute(
                                    'src'
                                );

                                previewWrapper.style.display =
                                    'none';

                                uploadPlaceholder.style.display =
                                    'block';
                            }


                            if (
                                typeof bootstrap !==
                                    'undefined' &&
                                bootstrap.Modal
                            ) {

                                const modal =
                                    bootstrap.Modal
                                        .getOrCreateInstance(
                                            editModalElement
                                        );

                                modal.show();
                            }

                        })
                        .catch(function (error) {

                            console.error(
                                'Get Category Error:',
                                error
                            );

                        });

                    }
                );

            }
        );


        /* =====================================================
           EDIT IMAGE
        ====================================================== */

        const editImageInput =
            document.getElementById(
                'edit-category-image'
            );

        const editImageError =
            document.getElementById(
                'editImageError'
            );


        if (editImageInput) {

            editImageInput.addEventListener(
                'change',
                function () {

                    editImageError.textContent = '';


                    const file =
                        this.files[0];


                    if (!file) {
                        return;
                    }


                    if (
                        !validateImage(
                            file,
                            editImageError
                        )
                    ) {

                        this.value = '';

                        return;
                    }


                    const reader =
                        new FileReader();


                    reader.onload =
                        function (event) {

                            const image =
                                document.getElementById(
                                    'edit-category-icon'
                                );

                            const wrapper =
                                document.getElementById(
                                    'edit-image-preview-wrapper'
                                );

                            const placeholder =
                                document.getElementById(
                                    'edit-upload-placeholder'
                                );


                            image.src =
                                event.target.result;

                            wrapper.style.display =
                                'block';

                            placeholder.style.display =
                                'none';

                        };


                    reader.readAsDataURL(file);

                }
            );

        }


        /* =====================================================
           UPDATE FORM
        ====================================================== */

        const editForm =
            document.getElementById(
                'editCategoryForm'
            );

        const updateBtn =
            document.getElementById(
                'updateCategoryBtn'
            );


        if (editForm && updateBtn) {

            editForm.addEventListener(
                'submit',
                function (event) {

                    if (
                        editImageInput.files.length > 0 &&
                        !validateImage(
                            editImageInput.files[0],
                            editImageError
                        )
                    ) {

                        event.preventDefault();

                        return;
                    }


                    updateBtn.disabled = true;

                    updateBtn.innerHTML =
                        '<i class="fa fa-spinner fa-spin me-2"></i> Updating...';

                }
            );

        }


        /* =====================================================
           DELETE FORM
        ====================================================== */

        const deleteForm =
            document.getElementById(
                'deleteCategoryForm'
            );

        const deleteBtn =
            document.getElementById(
                'deleteCategoryBtn'
            );


        if (deleteForm && deleteBtn) {

            deleteForm.addEventListener(
                'submit',
                function () {

                    deleteBtn.disabled = true;

                    deleteBtn.innerHTML =
                        '<i class="fa fa-spinner fa-spin me-2"></i> Deleting...';

                }
            );

        }


        /* =====================================================
           HIDE FORM
        ====================================================== */

        const hideForm =
            document.getElementById(
                'hideCategoryForm'
            );

        const hideBtn =
            document.getElementById(
                'hideCategoryBtn'
            );


        if (hideForm && hideBtn) {

            hideForm.addEventListener(
                'submit',
                function () {

                    hideBtn.disabled = true;

                    hideBtn.innerHTML =
                        '<i class="fa fa-spinner fa-spin me-2"></i> Please Wait...';

                }
            );

        }

    });


    /* =========================================================
       DATATABLE
    ========================================================= */

    $(document).ready(function () {

        if (
            $.fn.DataTable.isDataTable(
                '#data-table'
            )
        ) {

            $('#data-table')
                .DataTable()
                .destroy();
        }


        $('#data-table').DataTable({

            responsive: false,

            autoWidth: false,

            pageLength: 10,

            lengthMenu: [
                [10, 25, 50, 100],
                [10, 25, 50, 100]
            ],

            order: [
                [4, 'desc']
            ],

            columnDefs: [

                {
                    targets: 0,
                    width: '55px'
                },

                {
                    targets: 3,
                    orderable: false,
                    searchable: false,
                    width: '90px'
                },

                {
                    targets: 5,
                    orderable: false,
                    searchable: false,
                    width: '130px'
                }

            ],

            dom:
                "<'row align-items-center mb-2'" +

                    "<'col-md-6 col-12'l>" +

                    "<'col-md-6 col-12'f>" +

                ">" +

                "<'row'" +

                    "<'col-12'tr>" +

                ">" +

                "<'row align-items-center mt-2'" +

                    "<'col-md-6 col-12'i>" +

                    "<'col-md-6 col-12'p>" +

                ">",

            language: {

                lengthMenu:
                    'Show _MENU_ entries',

                search:
                    'Search:',

                searchPlaceholder:
                    'Search categories',

                emptyTable:
                    'No categories available',

                zeroRecords:
                    'No matching categories found',

                info:
                    'Showing _START_ to _END_ of _TOTAL_ entries',

                infoEmpty:
                    'Showing 0 to 0 of 0 entries'

            }

        });

    });
</script>

@endsection