@extends('backend.app')

@section('title', 'Banner Information')


@push('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .dropify-wrapper {
            height: 450px !important;
        }
    </style>
@endpush

@section('content')
    <div class="app-content content ">
        <!-- General banner Form section start -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title p-0 m-0">Banner Contents</h3>
            </div>
            <div class="card-body">
                <form class="form" method="POST" action="{{ route('banner.update') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group mb-3">
                                <label for="title" class="form-label">Title</label>
                                <input type="text" id="title" class="form-control" value="{{ $banner->title ?? '' }}"
                                    placeholder="Banner title" name="title" />
                                @error('title')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="form-group mb-3">
                                <label for="country" class="form-label">Background Image <span class="text-danger">*
                                        (1900 x 750)</span></label>
                                <input class="form-control dropify" type="file" name="image"
                                    @isset($banner->image)
                                                   data-default-file="{{ asset($banner->image) }}"
                                    @endisset>
                                @error('image')
                                    <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <div class="card shadow-sm rounded-3 border-1 my-5">
                                <div class="card-header">
                                    <h3 class="card-title p-0 m-0">Manage Banner Categories</h3>
                                </div>

                                <div class="card-body">
                                    <div class="row align-items-end mb-4">
                                        <!-- Add Category -->
                                        <div class="col-lg-8">
                                            <label for="banner_categories" class="form-label fw-bold">Add Category</label>
                                            <select id="banner_categories" class="form-control">
                                                <option value="">-- Select Category --</option>
                                                @foreach ($categories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-lg-4">
                                            <button type="button" id="addCategoryBtn" class="btn w-100 text-white"
                                                style="background-color:#DA8661;">
                                                Add Category
                                            </button>
                                        </div>
                                    </div>

                                    <!-- Selected Categories Table -->
                                    <table class="table table-striped align-middle">
                                        <thead style="background-color:#DA8661; color:white;">
                                            <tr>
                                                <th style="width:70%">Category</th>
                                                <th style="width:30%" class="text-center">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="selectedCategories">
                                            @if ($banner->category_I)
                                                <tr data-id="{{ $banner->category_I }}">
                                                    <td>{{ $banner->rel_category_I->name }}</td>
                                                    <td class="text-center">
                                                        <button type="button"
                                                            class="btn btn-sm btn-danger removeCategoryBtn">
                                                            <i class="fa fa-times"></i>
                                                        </button>
                                                        <input type="hidden" name="banner_categories[]"
                                                            value="{{ $banner->rel_category_I->id }}">
                                                    </td>
                                                </tr>
                                            @endif
                                            @if ($banner->category_II)
                                                <tr data-id="{{ $banner->category_II }}">
                                                    <td>{{ $banner->rel_category_II->name }}</td>
                                                    <td class="text-center">
                                                        <button type="button"
                                                            class="btn btn-sm btn-danger removeCategoryBtn">
                                                            <i class="fa fa-times"></i>
                                                        </button>
                                                        <input type="hidden" name="banner_categories[]"
                                                            value="{{ $banner->rel_category_II->id }}">
                                                    </td>
                                                </tr>
                                            @endif
                                            @if ($banner->category_III)
                                                <tr data-id="{{ $banner->category_III }}">
                                                    <td>{{ $banner->rel_category_III->name }}</td>
                                                    <td class="text-center">
                                                        <button type="button"
                                                            class="btn btn-sm btn-danger removeCategoryBtn">
                                                            <i class="fa fa-times"></i>
                                                        </button>
                                                        <input type="hidden" name="banner_categories[]"
                                                            value="{{ $banner->rel_category_III->id }}">
                                                    </td>
                                                </tr>
                                            @endif
                                            @if ($banner->category_IV)
                                                <tr data-id="{{ $banner->category_IV }}">
                                                    <td>{{ $banner->rel_category_IV->name }}</td>
                                                    <td class="text-center">
                                                        <button type="button"
                                                            class="btn btn-sm btn-danger removeCategoryBtn">
                                                            <i class="fa fa-times"></i>
                                                        </button>
                                                        <input type="hidden" name="banner_categories[]"
                                                            value="{{ $banner->rel_category_IV->id }}">
                                                    </td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>

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

                        <div class="col-lg-12">
                            <div class="text-end">
                                <button type="submit" class="btn btn-nest">Update</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection


@push('script')
    {{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $('.dropify').dropify();
    </script>

    <script>
        $(document).ready(function() {
            // Add category
            $('#addCategoryBtn').on('click', function() {
                let select = $('#banner_categories');
                let selectedId = select.val();
                let selectedText = select.find("option:selected").text();

                if (!selectedId) {
                    Toast.fire({
                        icon: 'error',
                        title: 'Please select a category.',
                    })
                    return;
                }

                // Prevent duplicates
                if ($("#selectedCategories tr[data-id='" + selectedId + "']").length > 0) {
                    Toast.fire({
                        icon: 'error',
                        title: 'Category already added.',
                    })
                    return;
                }

                // Max 4 categories
                if ($("#selectedCategories tr").length >= 4) {
                    Toast.fire({
                        icon: 'error',
                        title: 'You can add a maximum of 4 categories.',
                    })
                    return;
                }

                // Append to table
                $('#selectedCategories').append(`
                    <tr data-id="${selectedId}">
                        <td>${selectedText}</td>
                        <td class="text-center">
                            <button type="button" class="btn btn-sm btn-danger removeCategoryBtn">
                                <i class="fa fa-times"></i>
                            </button>
                            <input type="hidden" name="banner_categories[]" value="${selectedId}">
                        </td>
                    </tr>
                `);

                // Reset dropdown
                select.val('');
            });

            // Remove category
            $(document).on('click', '.removeCategoryBtn', function() {
                $(this).closest('tr').remove();
            });
        });
    </script>
@endpush