@extends('layouts.app')
@php
    $title = isset($banners) ? 'Edit Banner' : 'Create Banner';
@endphp
@section('title', $title)
<link href="{{ asset('css/gijgo.min.css') }}" rel="stylesheet" type="text/css" />
@section('css')
@endsection
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Banner Management</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">{{ $title }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">{{ $title }}</h3>
                        </div>

                        <form id="bannerForm"
                            action="{{ isset($banners) ? route('banner.update', $banners->banner_id) : route('banner.store') }}"
                            method="post" enctype="multipart/form-data">
                            @csrf
                            @if (isset($banners))
                                @method('PUT')
                            @endif

                            <div class="card-body">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="name">Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="name" id="name"
                                                value="{{ $banners->name ?? '' }}" placeholder="Enter name">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Service </label>
                                            <select class="custom-select form-control select2" name="service_id">
                                                <option value="">Select Service</option>
                                                @foreach ($services as $key => $ser)
                                                    <option value="{{ $key }}"
                                                        {{ isset($banners) && $banners->service_id == $key ? 'selected' : '' }}>
                                                        {{ $ser }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="image">Banner Image <span class="text-danger">*</span></label>
                                            <small>(aspect ratio 150*314)</small>
                                            <div class="input-group">
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" name="image[]" multiple
                                                        id="image">
                                                    <label class="custom-file-label" for="image">Choose files</label>
                                                </div>
                                            </div>

                                            {{-- Preview Section --}}
                                            <div id="previewContainer"
                                                style="display:flex; flex-wrap:wrap; margin-top:10px; gap:10px;"></div>

                                            <input type="hidden" id="imgcount" value="{{ $imgCount ?? 0 }}">
                                            <input type="hidden" id="delete_img_count" value="0">
                                            <input type="hidden" name="delete_image" id="deleteimg">

                                            @if (isset($banners) && $banners->image)
                                                @if (is_array($banners->banner_images))
                                                <div class="image-gallery" style="display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;">
                                                    @foreach ($banners->banner_images as $image)
                                                        <div class="image-container">
                                                            <img src="{{ $image }}" alt="Category Image"
                                                                width="100" class="mt-2">
                                                            <button type="button" class="btn-close remove-image"
                                                                data-image="{{ $image }}">X</button>
                                                        </div>
                                                    @endforeach
                                                </div>
                                                @endif
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="expire_date">Expire Date <span class="text-danger">*</span></label>
                                            {{-- <div class="input-group date" id="expire_date">
                                            <input type="text" class="form-control" id="expire_date" name="expire_date" value="{{$banners->banner_expire_date ?? '' }}">
                                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                        </div> --}}

                                            <div class="input-group date" id="expire_date">
                                                <input type="text" class="form-control" id="datepicker"
                                                    name="expire_date" value="{{ $banners->banner_expire_date ?? '' }}">
                                                {{-- <span class="input-group-text"><i class="fa fa-calendar"></i></span> --}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label>Status</label>
                                            <select class="custom-select select2" name="status">
                                                <option value="1"
                                                    {{ isset($banners) && $banners->status == 1 ? 'selected' : '' }}>Active
                                                </option>
                                                <option value="0"
                                                    {{ isset($banners) && $banners->status == 0 ? 'selected' : '' }}>In
                                                    Active</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <a href="{{ route('banner.list') }}" class="btn btn-secondary">Cancel</a>
                                <button type="button" id="storeBanner"
                                    class="btn btn-primary">{{ isset($banners) ? 'Update' : 'Submit' }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('scripts')
    <script src="{{ asset('js/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('js/additional-methods.min.js') }}"></script>
    <script src="{{ asset('js/gijgo.min.js') }}"></script>
    <script src="{{ asset('js/gijgo.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2();

            $('#datepicker').datepicker({
                uiLibrary: 'bootstrap4',
                format: 'yyyy-mm-dd',
                minDate: function() {
                    var date = new Date();
                    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
                },
                showRightIcon: false
            });
            var edit = "{{ isset($banners) ? 1 : 0 }}";
            $.validator.addMethod("noLeadingSpace", function(value, element) {
                return this.optional(element) || /^\S.*$/.test(value);
            }, "First character cannot be a space.");
            $("#bannerForm").validate({
                rules: {
                    name: {
                        required: true,
                        maxlength: 100,
                        noLeadingSpace: true
                    },
                    "image[]": {
                        required: function() {
                            var imgCount = parseInt($('#imgcount').val()) || 0;
                            var deleteImgCount = parseInt($('#delete_img_count').val()) || 0;
                            return (edit == 0 || imgCount === deleteImgCount);
                        },
                        extension: "jpg|jpeg|png|tiff|tif|webp",
                        filesize: 5242880 // 5MB
                    },
                    expire_date: {
                        required: true
                    }
                },
                messages: {
                    name: {
                        required: "Please enter a name",
                        maxlength: "Name cannot exceed 100 characters"
                    },
                    "image[]": {
                        required: "Please upload an image",
                        extension: "Only image files (JPG, JPEG, PNG, GIF) are allowed",
                        filesize: "File must be less than 5MB"
                    },
                    expire_date: {
                        required: "Please select expiry date"
                    }
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });

            $('#image').on('change', function() {
                var fileName = $(this).val().split("\\").pop();
                $(this).next('.custom-file-label').addClass("selected").html(fileName);
            });

            $.validator.addMethod('filesize', function(value, element, param) {
                return this.optional(element) || (element.files[0].size <= param);
            }, 'File size must be less than 1MB.');

            $("#storeBanner").click(function(e) {
                if ($("#bannerForm").valid()) {
                    $("#bannerForm").submit();
                }
            });

            $('.remove-image').on('click', function() {
                $(this).closest('.image-container').remove();
                var imagename = $(this).attr('data-image');
                var delete_img = $('#deleteimg').val();
                if (delete_img == '') {
                    $('#deleteimg').val(imagename);
                    $('#delete_img_count').val(1);
                } else {
                    var all_img = delete_img + ',' + imagename;
                    $('#deleteimg').val(all_img);
                    var imgSplit = all_img.split(',');
                    var imgcount = imgSplit.length;
                    $('#delete_img_count').val(imgcount);
                }
            })

            const input = document.getElementById('image');
            const previewContainer = document.getElementById('previewContainer');

            input.addEventListener('change', function(e) {
                previewContainer.innerHTML = ""; // clear old previews
                const files = Array.from(e.target.files);

                if (files.length > 0) {
                    this.nextElementSibling.innerText = files.map(f => f.name).join(", ");
                } else {
                    this.nextElementSibling.innerText = "Choose files";
                }

                files.forEach((file, index) => {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        // wrapper for image + remove button
                        const wrapper = document.createElement('div');
                        wrapper.style.position = "relative";
                        wrapper.style.width = "120px";

                        const img = document.createElement('img');
                        img.src = event.target.result;
                        img.style.width = "100%";
                        img.style.border = "1px solid #ccc";
                        img.style.padding = "5px";
                        img.style.borderRadius = "5px";

                        const btn = document.createElement('button');
                        btn.innerText = "×";
                        btn.type = "button";
                        btn.style.position = "absolute";
                        btn.style.top = "-8px";
                        btn.style.right = "-8px";
                        btn.style.background = "red";
                        btn.style.color = "#fff";
                        btn.style.border = "none";
                        btn.style.borderRadius = "50%";
                        btn.style.cursor = "pointer";
                        btn.style.width = "24px";
                        btn.style.height = "24px";

                        // remove preview on click
                        btn.addEventListener('click', function() {
                            wrapper.remove();

                            const dt = new DataTransfer();
                            Array.from(input.files).forEach((f, i) => {
                                if (i !== index) dt.items.add(f);
                            });
                            input.files = dt.files;

                            // ✅ FIX: reset input when last image removed
                            if (input.files.length === 0) {
                                input.value = "";
                                input.nextElementSibling.innerText = "Choose files";
                            } else {
                                input.nextElementSibling.innerText = Array.from(input
                                    .files).map(f => f.name).join(", ");
                            }
                        });

                        wrapper.appendChild(img);
                        wrapper.appendChild(btn);
                        previewContainer.appendChild(wrapper);
                    }
                    reader.readAsDataURL(file);
                });
            });
        });
    </script>
@endsection