@extends('template.layouts.template-base')
@section('title', 'Edit Banner')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <style>
        .page-content {
            background-color: #F0F4F8 !important;
            padding: 80px 10px;
        }

        .custom-select {
            font-size: 12px !important;
            color: #7e887e !important;
            padding: 10px;
        }

        .custom-select:has(option[value=""]:checked) {
            color: #101010;
            font-size: 12px;
        }

        .date-field input[type="text"] {
            color: #7e887e !important;
        }

        .order-input {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #cfd8ff;
            border-radius: 6px;
            font-size: 15px;
            outline: none;
        }

        .order-input:focus {
            border-color: #6c8cff;
            box-shadow: 0 0 0 2px rgba(108, 140, 255, .2);
        }

        .order-input::-webkit-inner-spin-button,
        .order-input::-webkit-outer-spin-button {
            -webkit-appearance: inner-spin-button !important;
            opacity: 1 !important;
            margin: 0;
        }

        .order-input {
            -moz-appearance: number-input !important;
        }

        input[type=number] {
            -moz-appearance: textfield;
        }

        .upload-label {
            height: 125px !important;
        }
    </style>
@endsection

@section('content')
    <section class="product-page add-service">

        {{-- Header --}}
        <div class="page-header">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="page-title">
                            <a href="{{ route('backend.banner.index') }}">Banner / <span class="breadcrumb-link">Edit
                                    Banner</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Main Form --}}
        <div class="container">
            <form id="editBannerForm" method="POST" action="{{ route('backend.banner.update', $banner->id) }}"
                enctype="multipart/form-data">
                @csrf
                @method('PUT')

                {{-- Validation Errors --}}
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="add-product-section banner-add-sec">
                    <h2 class="section-title">Banner</h2>

                    <div class="row g-3">
                        <div class="col-lg-3">
                            <label>Banner Type <span class="required">*</span></label>
                            <select name="banner_type" id="bannerTypeSelect" class="custom-select">
                                <option value="1" {{ $banner->banner_type == 1 ? 'selected' : '' }}>Annapurna Banner
                                </option>
                                <option value="2" {{ $banner->banner_type == 2 ? 'selected' : '' }}>Promotion Banner
                                </option>
                            </select>
                        </div>

                        <div class="col-lg-3">
                            <label>Banner Heading (English)</label>
                            <input type="text" name="banner_heading_en" value="{{ $banner->banner_heading_en }}"
                                placeholder="Enter Banner Heading(English)" />
                        </div>

                        <div class="col-lg-3">
                            <label>Banner Heading (Tamil)</label>
                            <input type="text" name="banner_heading_ta" value="{{ $banner->banner_heading_ta }}"
                                placeholder="Enter Banner Heading(Tamil)" />
                        </div>

                        <div class="col-lg-3">
                            <label>Banner Sub Heading (English)</label>
                            <input type="text" name="banner_sub_heading_en" value="{{ $banner->banner_sub_heading_en }}"
                                placeholder="Enter Sub Heading(English)" />
                        </div>

                        <div class="col-lg-3">
                            <label>Banner Sub Heading (Tamil)</label>
                            <input type="text" name="banner_sub_heading_ta" value="{{ $banner->banner_sub_heading_ta }}"
                                placeholder="Enter Sub Heading(Tamil)" />
                        </div>

                        <div class="col-lg-3">
                            <label>Redirect Type <span class="required">*</span></label>
                            <select name="link_type" id="linkTypeSelect" class="custom-select" required>
                                <option value="">Select Redirect Type</option>
                                <option value="1" {{ old('link_type', $banner->link_type) == 1 ? 'selected' : '' }}>Website URL</option>
                                <option value="2" {{ old('link_type', $banner->link_type) == 2 ? 'selected' : '' }}>URL</option>
                                <option value="3" {{ old('link_type', $banner->link_type) == 3 ? 'selected' : '' }}>Mobile</option>
                            </select>
                        </div>

                        <div class="col-lg-3" id="phoneField">
                            <label>Mobile Number <span class="required">*</span></label>
                            <div class="input-with-prefix">
                                <span class="input-prefix">91</span>
                                <input type="text" name="phone_number" value="{{ old('phone_number', $banner->phone_number) }}"
                                    maxlength="10" placeholder="Enter Mobile Number">
                            </div>
                        </div>

                        <div class="col-lg-3" id="externalUrlField">
                            <label>External URL <span class="required">*</span></label>
                            <input type="text" name="link_url" id="linkUrlInput"
                                value="{{ old('link_url', $banner->link_url) }}" placeholder="https://example.com" />
                        </div>

                        <div class="col-lg-3" id="internalTypeField">
                            <label>Website Target Type <span class="required">*</span></label>
                            <select name="link_target_type" id="linkTargetTypeSelect" class="custom-select">
                                <option value="">Select Target Type</option>
                                <option value="1" {{ old('link_target_type', $banner->link_target_type) == 1 ? 'selected' : '' }}>Product</option>
                                <option value="3" {{ old('link_target_type', $banner->link_target_type) == 3 ? 'selected' : '' }}>Other Service</option>
                            </select>
                        </div>

                        <div class="col-lg-3" id="serviceCategoryField">
                            <label>Other Service Category <span class="required">*</span></label>
                            <select name="link_service_category_id" id="linkServiceCategorySelect" class="custom-select">
                                <option value="">Select Service Category</option>
                                @foreach ($serviceCategories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ old('link_service_category_id', $serviceCategoryId) == $category->id ? 'selected' : '' }}>
                                        {{ $category->category_name_en }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-lg-3" id="internalTargetField">
                            <label>Website Target <span class="required">*</span></label>
                            <select name="link_target_id" id="linkTargetIdSelect" class="custom-select"
                                data-selected="{{ old('link_target_id', $banner->link_target_id) }}">
                                <option value="">Select Target</option>
                            </select>
                        </div>

                        <div class="col-lg-3">
                            <label>Banner Position <span class="required">*</span></label>
                            <select name="banner_position" id="bannerPositionSelect" class="custom-select">
                                <option value="1" id="positionTopOption"
                                    {{ $banner->banner_position == 1 ? 'selected' : '' }}>Home Page Top</option>
                                <option value="2" {{ $banner->banner_position == 2 ? 'selected' : '' }}>Home Page
                                    Middle</option>
                                <option value="3" {{ $banner->banner_position == 3 ? 'selected' : '' }}>Home Page
                                    Bottom</option>
                            </select>
                        </div>

                        <div class="col-lg-3">
                            <div class="date-input-group">
                                <div class="date-field">
                                    <label>Start Date</label>
                                    <input type="text" name="start_date" id="from-date"
                                        value="{{ $banner->start_date ? \Carbon\Carbon::parse($banner->start_date)->format('d M, Y') : '' }}"
                                        placeholder="Select Date" readonly />
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="date-input-group">
                                <div class="date-field">
                                    <label>End Date</label>
                                    <input type="text" name="end_date" id="to-date"
                                        value="{{ $banner->end_date ? \Carbon\Carbon::parse($banner->end_date)->format('d M, Y') : '' }}"
                                        placeholder="Select Date" readonly />
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <label>Banner Status</label>
                            <div class="radio-group">
                                <label class="radio-label">
                                    <input type="radio" name="status" value="1"
                                        {{ $banner->status == 1 ? 'checked' : '' }} />
                                    <span>Active</span>
                                </label>
                                <label class="radio-label">
                                    <input type="radio" name="status" value="0"
                                        {{ $banner->status == 0 ? 'checked' : '' }} />
                                    <span>Inactive</span>
                                </label>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <label>Banner Order</label>
                            <input type="number" name="banner_order" class="order-input"
                                value="{{ $banner->banner_order }}" min="0">
                        </div>
                    </div>
                </div>
                <input type="hidden" id="existingImage" value="{{ $banner->image }}">
                {{-- Banner Image --}}
                <div class="add-product-section">
                    <h2 class="section-title">Banner Image <span class="required">*</span> <span
                            class="small-txt">(370px*150px)</span></h2>
                    <div class="row mb-0">
                        <div class="col-lg-12">
                            <div class="image-upload-box-2">
                                <input type="file" name="image" id="productImage" accept="image/*" hidden>
                                <label for="productImage" class="upload-label" id="uploadLabel">
                                    {{-- Show upload UI only if no existing image --}}
                                    <div class="upload-content" id="uploadContent"
                                        style="{{ $banner->image ? 'display:none;' : 'display:flex;' }}">
                                        <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}"
                                            class="add-img" alt="Images">
                                        <div class="upload-text">Choose a file or drag and drop it here</div>
                                        <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                                    </div>
                                    {{-- Show existing image if available --}}
                                    <img id="imagePreview" src="{{ $banner->image ? asset($banner->image) : '#' }}"
                                        alt="Preview"
                                        style="{{ $banner->image ? 'display:block;' : 'display:none;' }} width:100%; height:123px; object-fit:contain; border-radius:6px; padding:4px;" />
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Action Buttons --}}
                <div class="action-buttons">
                    <a href="{{ route('backend.banner.index') }}" class="btn btn-secondary">Cancel</a>
                    <button type="submit" class="btn btn-primary">Update Banner</button>
                </div>

            </form>
        </div>

    </section>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
    <script>
        // Flatpickr
        flatpickr("#from-date", {
            dateFormat: "d M, Y"
        });
        flatpickr("#to-date", {
            dateFormat: "d M, Y"
        });

        // Banner Type toggle — hide phone & Home Page Top for Promotion Banner
        const bannerTypeSelect = document.getElementById('bannerTypeSelect');
        const positionTopOption = document.getElementById('positionTopOption');
        const bannerPositionSelect = document.getElementById('bannerPositionSelect');
        const linkTypeSelect = document.getElementById('linkTypeSelect');
        const linkTargetTypeSelect = document.getElementById('linkTargetTypeSelect');
        const linkTargetIdSelect = document.getElementById('linkTargetIdSelect');
        const linkServiceCategorySelect = document.getElementById('linkServiceCategorySelect');

        const bannerProducts = @json($products->map(function ($item) {
            return ['id' => $item->id, 'name' => $item->product_name_en];
        }));
        const bannerServices = @json($services->map(function ($item) {
            return ['id' => $item->id, 'name' => $item->name_en, 'category_id' => $item->other_service_category_id];
        }));

        function handleBannerTypeChange() {
          const isPromotion = bannerTypeSelect.value === '2';

          // Hide Top option for Promotion
          positionTopOption.style.display = isPromotion ? 'none' : 'block';

          if (isPromotion) {
              bannerPositionSelect.value = '2';
          } else if (bannerTypeSelect.value === '1') {
              bannerPositionSelect.value = '1';
          }
        }
        handleBannerTypeChange();
        bannerTypeSelect.addEventListener('change', handleBannerTypeChange);

        let initialTargetApplied = false;
        function populateTargetOptions() {
            const targetType = linkTargetTypeSelect.value;
            let items = [];
            if (targetType === '1') {
                items = bannerProducts;
            } else if (targetType === '3') {
                const categoryId = linkServiceCategorySelect.value;
                items = bannerServices.filter(function (item) {
                    return String(item.category_id) === String(categoryId);
                });
            }
            linkTargetIdSelect.innerHTML = '<option value="">Select Target</option>';
            items.forEach(function (item) {
                const option = document.createElement('option');
                option.value = item.id;
                option.textContent = item.name;
                linkTargetIdSelect.appendChild(option);
            });

            const selected = linkTargetIdSelect.dataset.selected;
            if (!initialTargetApplied && selected) {
                linkTargetIdSelect.value = selected;
                initialTargetApplied = true;
            }
        }

        function toggleLinkFields() {
            const type = linkTypeSelect.value;
            const isMobile = type === '3';
            const isUrl = type === '2';
            const isInternal = type === '1';
            const isServiceTarget = isInternal && linkTargetTypeSelect.value === '3';

            $('#phoneField').toggle(isMobile).find('input').prop('disabled', !isMobile);
            $('#externalUrlField').toggle(isUrl).find('input').prop('disabled', !isUrl);
            $('#internalTypeField').toggle(isInternal).find('select').prop('disabled', !isInternal);
            $('#serviceCategoryField').toggle(isServiceTarget).find('select').prop('disabled', !isServiceTarget);
            $('#internalTargetField').toggle(isInternal).find('select').prop('disabled', !isInternal);

            if (isInternal) {
                populateTargetOptions();
            }
        }

        linkTypeSelect.addEventListener('change', toggleLinkFields);
        linkTargetTypeSelect.addEventListener('change', function () {
            linkTargetIdSelect.dataset.selected = '';
            populateTargetOptions();
            toggleLinkFields();
        });
        linkServiceCategorySelect.addEventListener('change', function () {
            linkTargetIdSelect.dataset.selected = '';
            populateTargetOptions();
        });

        // Image preview on file change
        document.getElementById('productImage').addEventListener('change', function() {
            const file = this.files[0];
            const preview = document.getElementById('imagePreview');
            const uploadContent = document.getElementById('uploadContent');
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                    uploadContent.style.display = 'none';
                };
                reader.readAsDataURL(file);
            }
        });
        toggleLinkFields();

        // Frontend validation — only banner_type, banner_position required (image optional on edit)
        $.validator.addMethod('filesize', function(value, element, param) {
            return this.optional(element) || (element.files[0].size <= param);
        }, 'File size must not exceed 1 MB.');

        $('#editBannerForm').validate({
            ignore: [],
            rules: {
                banner_type:     { required: true },
                banner_position: { required: true },
                link_type:       { required: true },
                link_url: {
                    required: {
                        depends: function () {
                            return $('#linkTypeSelect').val() === '2';
                        }
                    },
                    url: true
                },
                link_target_type: {
                    required: {
                        depends: function () {
                            return $('#linkTypeSelect').val() === '1';
                        }
                    }
                },
                link_target_id: {
                    required: {
                        depends: function () {
                            return $('#linkTypeSelect').val() === '1';
                        }
                    }
                },
                link_service_category_id: {
                    required: {
                        depends: function () {
                            return $('#linkTypeSelect').val() === '1' && $('#linkTargetTypeSelect').val() === '3';
                        }
                    }
                },
                image: {
                    required: function () {
                        return $('#existingImage').val() === '';
                    },
                    extension: 'jpg|jpeg|png',
                    filesize: 1048576
                },
                phone_number: {
                    required: {
                        depends: function () {
                            return $('#linkTypeSelect').val() === '3';
                        }
                    },
                    digits: true,
                    minlength: 10,
                    maxlength: 10
                },
            },
                messages: {
                },
                errorClass: 'text-danger',
                errorPlacement: function (error, element) {
                    if (element.attr('name') === 'image') {
                        error.appendTo(element.closest('.image-upload-box-2'));
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function (form) {
                    form.submit();
                }
        });
    </script>
@endsection