@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">
@endsection

@section('content')

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

    {{-- CREATE CATEGORY --}}
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8 col-12">

                <div class="card shadow-lg border-0">
                    <div class="card-body p-4">

                        <div class="row">
                            <div>
                                <h3 class="page-top-heading">
                                    Create Category
                                </h3>
                            </div>
                        </div>

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

                            @csrf

                            <div class="row mt-4">

                                {{-- CATEGORY NAME --}}
                                <div class="mb-3">
                                    <label class="mb-2 filter-by-p">
                                        Category Name
                                    </label>

                                    <input
                                        type="text"
                                        class="form-control filter-input"
                                        name="category_name"
                                        id="category_name"
                                        value="{{ old('category_name') }}"
                                        placeholder="Category Name"
                                        required>
                                </div>

                                {{-- MALAYALAM NAME --}}
                                <div class="mb-3">
                                    <label class="mb-2 filter-by-p">
                                        Category name in Malayalam
                                    </label>

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

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

                                    <label class="mb-2 filter-by-p">
                                        Category Icon
                                    </label>

                                    <div
                                        class="category-upload-wrapper"
                                        id="category-upload-wrapper">

                                        <div
                                            id="icon-upload-conditions"
                                            class="icon-upload-conditions text-center">

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

                                            <p class="text-center click-to-upload">
                                                Click to Upload
                                            </p>

                                            <div class="file-size-UHGHH">
                                                ( Max file size: 2048 KB jpeg,png,jpg,gif,svg )
                                            </div>

                                        </div>

                                        <img
                                            src=""
                                            id="category-icon-view"
                                            class="img-responsive"
                                            style="
                                                display:none;
                                                max-width:120px;
                                                max-height:120px;
                                                object-fit:contain;
                                                margin:10px auto;
                                            ">

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

                                    </div>
                                </div>

                                {{-- CREATE BUTTON --}}
                                <div class="text-center mt-3">

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

                                        <i class="fa-solid fa-plus me-2"></i>
                                        Add Category

                                    </button>

                                </div>

                            </div>

                        </form>

                    </div>
                </div>

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


    {{-- CATEGORY TABLE --}}
    <div class="row mt-4">

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

            <div class="card datatable-card">

                <div class="card-body">

                    <table
                        id="data-table"
                        class="table nowrap 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>

                                    <td>
                                        {{ $loop->iteration }}
                                    </td>

                                    <td>
                                        {{ $category->category_name }}
                                    </td>

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

                                    <td>

                                        @if ($category->image)

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

                                        @else

                                            <p>Null</p>

                                        @endif

                                    </td>

                                    <td>
                                        {{ $category->created_at->format('Y-m-d') }}
                                    </td>

                                    <td>

                                        {{-- EDIT --}}
                                        <button
                                            type="button"
                                            class="btn transparent-btn me-1 updatebtn"
                                            data-user-id="{{ $category->id }}">

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

                                        </button>


                                        {{-- HIDE / UNHIDE --}}
                                        <button
                                            type="button"
                                            data-bs-toggle="modal"
                                            data-bs-target="#Hide2Modal"
                                            class="btn transparent-btn"
                                            data-user-id="{{ $category->id }}"
                                            onclick="setCategoryId(this)">

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

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

                                            @else

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

                                            @endif

                                        </button>


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

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

                                        </button>

                                    </td>

                                </tr>

                            @endforeach

                        </tbody>

                    </table>

                </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">

        <div class="modal-content">

            <div class="modal-header">

                <h1
                    class="modal-title fs-5"
                    id="editCategoryModalLabel">

                    Edit Category

                </h1>

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

            </div>


            <div class="modal-body">

                <div class="row">

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

                        <div class="modal-card px-3">

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

                                @csrf

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


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

                                    <label
                                        for="cat-name"
                                        class="pb-2">

                                        Category Name

                                    </label>

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

                                </div>


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

                                    <label
                                        for="caty-name"
                                        class="pb-2">

                                        Category name in Malayalam

                                    </label>

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

                                </div>


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

                                    <label
                                        for="edit-category-image"
                                        class="pb-2">

                                        Category Icon

                                    </label>


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

                                        {{-- EXISTING / NEW 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="img-responsive"
                                                style="
                                                    max-width:120px;
                                                    max-height:120px;
                                                    object-fit:contain;
                                                ">

                                        </div>


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

                                            <div class="mb-2">

                                                <i class="fa-solid fa-file-arrow-up upload-icon"></i>

                                            </div>

                                            <p class="mb-1">
                                                Upload Category Icon
                                            </p>

                                            <small class="text-muted">
                                                jpeg, png, jpg, gif, svg
                                            </small>

                                        </div>


                                        {{-- FILE INPUT --}}
                                        <input
                                            type="file"
                                            id="edit-category-image"
                                            name="uimage"
                                            class="form-control"
                                            accept=".jpeg,.jpg,.png,.gif,.svg">

                                    </div>

                                </div>


                                {{-- UPDATE BUTTON --}}
                                <button
                                    type="submit"
                                    id="updateCategoryBtn"
                                    class="btn btn-primary full-width-btn my-3">

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

                                    Update Category

                                </button>

                            </form>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>


{{-- ================================================= --}}
{{-- HIDE MODAL --}}
{{-- ================================================= --}}

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

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-body">

                <div class="row">

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

                        <div class="p-3">

                            <div class="text-center">

                                <img
                                    class="mb-3"
                                    src="{{ asset('/assets/images/icons/hide.svg') }}">

                                <p class="my-4 are-you-sure"></p>

                                <p class="text-muted my-2 are-you-sure-subtext">
                                    Are you sure you want to hide/unhide this?
                                </p>

                            </div>


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

                                @csrf

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


                                <div class="d-flex align-items-center mt-5 mb-3">

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

                                        Cancel

                                    </button>


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

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

                                        Yes

                                    </button>

                                </div>

                            </form>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>


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

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

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-body">

                <div class="row">

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

                        <div class="p-3">

                            <div class="text-center">

                                <img
                                    class="mb-3"
                                    src="{{ asset('/assets') }}/images/icons/delete-icon.svg">

                                <p class="my-4 are-you-sure"></p>

                                <p class="text-muted my-2 are-you-sure-subtext">
                                    Are you sure want to Delete this?
                                </p>

                            </div>


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

                                @csrf

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


                                <div class="d-flex align-items-center mt-5 mb-3">

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

                                        Cancel

                                    </button>


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

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

                                        Yes, Delete

                                    </button>

                                </div>

                            </form>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>


{{-- ================================================= --}}
{{-- JAVASCRIPT --}}
{{-- ================================================= --}}

<script>

/*
|--------------------------------------------------------------------------
| HIDE CATEGORY ID
|--------------------------------------------------------------------------
*/

function setCategoryId(button)
{
    const categoryId =
        button.getAttribute('data-user-id');

    document.getElementById('category_id').value =
        categoryId;
}


/*
|--------------------------------------------------------------------------
| DELETE CATEGORY ID
|--------------------------------------------------------------------------
*/

function setDeleteId(button)
{
    const deleteId =
        button.getAttribute('data-user-id');

    document.getElementById('delete_id').value =
        deleteId;
}


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

    /*
    |--------------------------------------------------------------------------
    | CREATE CATEGORY IMAGE
    |--------------------------------------------------------------------------
    */

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

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

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

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


    if (createWrapper && createInput) {

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

            if (event.target !== createInput) {
                createInput.click();
            }

        });


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

            const file = this.files[0];

            if (!file) {
                return;
            }


            const reader = new FileReader();


            reader.onload = function (event) {

                createPreview.src =
                    event.target.result;

                createPreview.style.display =
                    'block';

                if (createConditions) {
                    createConditions.style.display =
                        'none';
                }

            };


            reader.readAsDataURL(file);

        });

    }


    /*
    |--------------------------------------------------------------------------
    | EDIT BUTTON
    |--------------------------------------------------------------------------
    */

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

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


    editButtons.forEach(function (button) {

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

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


            /*
             * Clear previous modal data
             */

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

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

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


            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');


            editFileInput.value = '';

            editImage.removeAttribute('src');

            previewWrapper.style.display =
                'none';

            uploadPlaceholder.style.display =
                'block';


            /*
             * Fetch category
             */

            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. Status: ' +
                        response.status
                    );

                }

                return response.json();

            })

            .then(function (response) {

                console.log(
                    'Category Response:',
                    response
                );


                /*
                 * Fill category details
                 */

                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 ?? '';


                /*
                 * Existing image
                 */

                if (response.img) {

                    editImage.src =
                        response.img;

                    previewWrapper.style.display =
                        'block';

                    uploadPlaceholder.style.display =
                        'none';

                } else {

                    editImage.removeAttribute('src');

                    previewWrapper.style.display =
                        'none';

                    /*
                     * IMPORTANT:
                     * Image இல்லாத category-க்கும்
                     * upload option visible.
                     */

                    uploadPlaceholder.style.display =
                        'block';
                }


                /*
                 * OPEN BOOTSTRAP MODAL
                 */

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

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

                    modal.show();

                } else {

                    console.error(
                        'Bootstrap Modal JS is not loaded.'
                    );

                    alert(
                        'Unable to open edit modal. Bootstrap JS is not loaded.'
                    );

                }

            })

            .catch(function (error) {

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

                alert(
                    'Unable to load category details.'
                );

            });

        });

    });


    /*
    |--------------------------------------------------------------------------
    | EDIT CATEGORY IMAGE PREVIEW
    |--------------------------------------------------------------------------
    */

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


    if (editImageInput) {

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

                const file =
                    this.files[0];

                if (!file) {
                    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);

            }
        );

    }


    /*
    |--------------------------------------------------------------------------
    | CREATE FORM
    |--------------------------------------------------------------------------
    */

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

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


    if (categoryForm && categoryBtn) {

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

                if (!this.checkValidity()) {
                    return;
                }


                if (
                    createInput &&
                    createInput.files.length === 0
                ) {

                    alert(
                        'Please upload image'
                    );

                    event.preventDefault();

                    return;
                }


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

                categoryBtn.disabled =
                    true;

            }
        );

    }


    /*
    |--------------------------------------------------------------------------
    | UPDATE FORM
    |--------------------------------------------------------------------------
    */

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

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


    if (editForm && updateBtn) {

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

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

                updateBtn.disabled =
                    true;

            }
        );

    }


    /*
    |--------------------------------------------------------------------------
    | DELETE FORM
    |--------------------------------------------------------------------------
    */

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

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


    if (deleteForm && deleteBtn) {

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

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

                deleteBtn.disabled =
                    true;

            }
        );

    }


    /*
    |--------------------------------------------------------------------------
    | HIDE FORM
    |--------------------------------------------------------------------------
    */

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

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


    if (hideForm && hideBtn) {

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

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

                hideBtn.disabled =
                    true;

            }
        );

    }

});

</script>

@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
    type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js">
</script>

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

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

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

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

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

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

@endsection