@extends('admin.layout')
@section('title', 'Category')
@section('header')

<!-- DataTable CSS -->
<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">


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


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

        <div class="row mt-4">


            <div class="col-12 col-md-3">
                <div class="">
                    <label class="mb-2 filter-by-p">Category Name</label>
                    <input type="text" class="form-control filter-input" name="category_name"
                        placeholder="Category Name">
                </div>


                @if ($errors->has('category_name'))
                <span class="text-danger">{{ $errors->first('category_name') }}</span>
                @endif

                <div class="">
                    <label class="mb-2 filter-by-p">வகை பெயர்</label>
                    <input type="text" class="form-control filter-input" name="cat_name"
                        placeholder="வகை பெயர் உள்ளிடவும்">
                </div>


            </div>

            <div class="col-12 mt-3">
                <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: 1 MB, PNG Only )</div>
                        <img src="" id="category-icon-view" class="img-responsive">
                    </div>
                    <input class="upload-icon" type="file" name="image" id="upload-category-icon"
                        style="display: none;">

                </div>
            </div>
            <div class="col-12 mt-3">
                <button type="submit" class="btn btn-primary feature-btn"><i class="fa-solid fa-plus me-2"></i>Add
                    Category</button>
            </div>
        </div>
    </form>


    <!-- Table Row -->
    <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 TAMIL</th>
                                <th>PREVIEW</th>
                                <th>CREATED DATE</th>
                                <th>ACTION</th>
                            </tr>
                        </thead>
                        @php
                        $sn = 1;
                        @endphp
                        <tbody>
                            @foreach ($category_list as $category)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $category->category_name }}</td>
                                <td>{{ $category->cat_name }}</td>
                            {{-- Category Image --}}
            <td>

                @php
                    $imageUrl = null;

                    $digitalOceanBaseUrl =
                        'https://dstone.sfo3.digitaloceanspaces.com';

                    if (
                        !empty(
                            $category->category_image
                        )
                    ) {
                        $storedImage = ltrim(
                            trim(
                                $category->category_image
                            ),
                            '/'
                        );

                        /*
                        |--------------------------------------------------------------------------
                        | Already full URL
                        |--------------------------------------------------------------------------
                        */
                        if (
                            str_starts_with(
                                $storedImage,
                                'http://'
                            ) ||
                            str_starts_with(
                                $storedImage,
                                'https://'
                            )
                        ) {
                            $imageUrl =
                                $storedImage;

                        /*
                        |--------------------------------------------------------------------------
                        | New DigitalOcean path
                        |--------------------------------------------------------------------------
                        | DB: icons/1784800073_images.jpg
                        |--------------------------------------------------------------------------
                        */
                        } elseif (
                            str_starts_with(
                                $storedImage,
                                'icons/'
                            )
                        ) {
                            $imageUrl =
                                rtrim(
                                    $digitalOceanBaseUrl,
                                    '/'
                                ) .
                                '/' .
                                $storedImage;

                        /*
                        |--------------------------------------------------------------------------
                        | Old local path
                        |--------------------------------------------------------------------------
                        | DB: assets/uploads/icons/image.png
                        |--------------------------------------------------------------------------
                        */
                        } else {
                            $imageUrl = asset(
                                $storedImage
                            );
                        }
                    }
                @endphp

                @if($imageUrl)

                    <img src="{{ $imageUrl }}"
                         class="preview-td-img"
                         alt="{{ $category->category_name ?? 'Category image' }}"
                         loading="lazy"
                         onerror="
                            this.style.display='none';
                            this.nextElementSibling.style.display='inline';
                         ">

                    <span class="text-danger"
                          style="display:none;">

                        Image not found

                    </span>

                @else

                    <span class="text-muted">
                        No image
                    </span>

                @endif

            </td>

                                <td>{{ $category->created_at->format('Y-m-d') }}</td>
                                <td>
                                    <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>
                                    <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 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>



                        <!--Edit Category Modal Starts-->
                        <div class="modal fade zoom-in" id="EditCategoryModal" tabindex="-1"
                            aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="modal-title fs-5" id="exampleModalLabel">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">
                                                        @csrf
                                                        <div class="form-group mb-3">
                                                            <label for="title" class="pb-2">Category Name</label>
                                                            <input type="hidden" value="{{ old('ucategory_id') }}"
                                                                class="form-control" id="cat-id"
                                                                name="ucategory_id">
                                                            <input type="text" value="{{ old('ucategory_name') }}"
                                                                class="form-control" id="cat-name"
                                                                name="ucategory_name" placeholder="Category Name"
                                                                required>
                                                        </div>
                                                        <div class="form-group mb-3">
                                                            <label for="cat-name-tamil" class="pb-2">Category Name in Tamil</label>
                                                            <input type="text" value="{{ old('ucat_name') }}"
                                                                class="form-control" id="caty-name"
                                                                name="ucat_name" placeholder="வகை பெயர்"
                                                                required>
                                                        </div>

                                                        <div class="my-3">
                                                            <label for="title" class="pb-2">Category Icon</label>
                                                            <div id="update-category-icon-wrapper"
                                                                class="category-upload-wrapper">
                                                                <img src="{{ asset('/assets/images/icons/plumber.svg') }}"
                                                                    id="edit-category-icon" class="img-responsive">
                                                                <input type="file" id="image" name="uimage"
                                                                    class="form-control">
                                                            </div>
                                                        </div>
                                                        <button type="submit"
                                                            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>
                        <!--Edit Category Modal Ends-->


                        <!--Hide Modal Starts-->
                        <div class="modal fade zoom-in" id="Hide2Modal" tabindex="-1"
                            aria-labelledby="exampleModalLabel" 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">
                                                        @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" 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>
                        <!--Hide Modal Ends-->



                        <!--Delete Modal  Starts-->
                        <div class="modal fade zoom-in" id="Delete2Modal" tabindex="-1"
                            aria-labelledby="exampleModalLabel" 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">
                                                        @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" 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>
                        <!--Delete Modal Ends-->

                    </table>

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


</div>


<script>
    function setCategoryId(button) {
        var categoryId = button.getAttribute('data-user-id');
        document.getElementById('category_id').value = categoryId;
    }
</script>
<script>
    function setDeleteId(button) {
        var deleteId = button.getAttribute('data-user-id');
        document.getElementById('delete_id').value = deleteId;
    }
</script>
<script>
    document.getElementById('image').addEventListener('change', function() {
        const fileName = this.files[0].name;
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('edit-category-icon').src = e.target.result;
        }
        reader.readAsDataURL(this.files[0]);
    });
</script>

<!-- end container fluid -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).on('click', '.updatebtn', function() {
        var id = $(this).data('user-id');
        $.ajax({
            url: './get_category/' + id,
            type: 'GET',
            success: function(response) {
                console.log(response)
                $('#cat-id').val(response.cat_id);
                $('#cat-name').val(response.cat_name);
                $('#cat_name_malayalam').val(response.cat_name_malayalam);
                $('#caty-name').val(response.category_name);

                if (response.img) {
                    $('#edit-category-icon').attr('src', response.img);
                    $('#update-category-icon-wrapper').removeClass(
                        'd-none');
                } else {
                    $('#edit-category-icon').removeAttr(
                        'src');
                    $('#update-category-icon-wrapper').addClass('d-none');
                }
                $('#update-btn').data('category-id', response
                    .id);
                $('#EditCategoryModal').modal('show');
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });
    });
</script>


<!-- JS for Upload Category Icon -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const uploadInput = document.getElementById('upload-category-icon');
        const imageView = document.getElementById('category-icon-view');
        const wrapper = document.getElementById('category-upload-wrapper');
        const uploadConditions = document.querySelectorAll(
            '.icon-upload-conditions > div, .icon-upload-conditions > p, .icon-upload-conditions > .file-size-UHGHH'
        );

        wrapper.addEventListener('click', function() {
            uploadInput.click();
        });

        uploadInput.addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    imageView.src = e.target.result;
                    hideUploadConditions();
                };
                reader.readAsDataURL(file);
            } else {
                imageView.src = '';
            }
        });

        function hideUploadConditions() {
            uploadConditions.forEach(element => {
                element.style.display = 'none';
            });
        }
    });
</script>

<!-- JS for Edit Category Icon -->
<script>
    document.getElementById('update-category-icon-wrapper').addEventListener('click', function() {
        document.getElementById('change-existing-icon').click();
    });
    document.getElementById('change-existing-icon').addEventListener('change', function(event) {
        const file = event.target.files[0];
        const reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('edit-category-icon').src = e.target.result;
        }
        reader.readAsDataURL(file);
    });
</script>

<script>
    const getDistrictsURL = "{{ url('/get-districts') }}";
    const getTaluksURL = "{{ url('/get-taluks') }}";
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const stateDropdown = document.getElementById('state_id');
        const districtDropdown = document.getElementById('district_id');
        const talukDropdown = document.getElementById('taluk_id');

        stateDropdown.addEventListener('change', function() {
            const stateId = this.value;
            districtDropdown.innerHTML = '<option value="">-- Select District --</option>';
            talukDropdown.innerHTML = '<option value="">-- Select Taluk --</option>';

            if (stateId) {
                fetch(`${getDistrictsURL}?state_id=${stateId}`)
                    .then(response => response.json())
                    .then(data => {
                        data.forEach(district => {
                            const option = document.createElement('option');
                            option.value = district.id;
                            option.textContent = district.district_name;
                            districtDropdown.appendChild(option);
                        });
                    });
            }
        });

        districtDropdown.addEventListener('change', function() {
            const districtId = this.value;
            talukDropdown.innerHTML = '<option value="">-- Select Taluk --</option>';

            if (districtId) {
                fetch(`${getTaluksURL}?district_id=${districtId}`)
                    .then(response => response.json())
                    .then(data => {
                        data.forEach(taluk => {
                            const option = document.createElement('option');
                            option.value = taluk.id;
                            option.textContent = taluk.taluk_name;
                            talukDropdown.appendChild(option);
                        });
                    });
            }
        });
    });
</script>


@endsection
@section('footer')


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

<!-- Datatable JS -->
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/datatables.init.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/jquery.dataTables.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>



@endsection