@extends('template.layouts.template-base')
@section('title', 'Add 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">
        <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">Add
                                    Banner</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <form method="POST" action="{{ route('backend.banner.store') }}" enctype="multipart/form-data" id="addBannerForm">
                @csrf
                @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" required>
                                <option value="">Select Banner Type</option>

                                <option value="1" {{ old('banner_type') == '1' ? 'selected' : '' }}>
                                    Annapurna Banner
                                </option>

                                <option value="2" {{ old('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="{{ old('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="{{ old('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="{{ old('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="{{ old('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') == '1' ? 'selected' : '' }}>App URL</option>
                                <option value="2" {{ old('link_type') == '2' ? 'selected' : '' }}>URL</option>
                                <option value="3" {{ old('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') }}"
                                    placeholder="Enter Mobile Number" maxlength="10">
                            </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') }}"
                                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') == '1' ? 'selected' : '' }}>Product</option>
                                <option value="3" {{ old('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') == $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') }}">
                                <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="">Select Banner Position</option>
                                <option value="1" id="positionTopOption"
                                    {{ old('banner_position') == '1' ? 'selected' : '' }}>Home Page Top</option>
                                <option value="2" {{ old('banner_position') == '2' ? 'selected' : '' }}>Home Page
                                    Middle</option>
                                <option value="3" {{ old('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="{{ old('start_date') }}" 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="{{ old('end_date') }}"
                                        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"
                                        {{ old('status', '1') == '1' ? 'checked' : '' }} />
                                    <span>Active</span>
                                </label>
                                <label class="radio-label">
                                    <input type="radio" name="status" value="0"
                                        {{ old('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="{{ old('banner_order', 0) }}" min="0">
                        </div>
                    </div>
                </div>
                <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">
                                  <div class="upload-content" id="uploadContent">
                                      <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>
                                  {{-- Preview shown after file selected --}}
                                  <img id="imagePreview" src="#" alt="Preview"
                                      style="display:none; width:100%; height:123px; object-fit:contain; border-radius:6px; padding:4px;" />
                              </label>
                          </div>
                          <label id="productImage-error" class="text-danger" for="productImage"></label>
                        </div>
                    </div>
                </div>
                <div class="action-buttons">
                    <a href="{{ route('backend.banner.index') }}" class="btn btn-secondary">Cancel</a>
                    <button type="submit" class="btn btn-primary">Add Banner</button>
                </div>

            </form>
        </div>

    </section>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        flatpickr("#from-date", {
            dateFormat: "d M, Y",
            defaultDate: "today"
        });

        flatpickr("#to-date", {
            dateFormat: "d M, Y",
            defaultDate: "today"
        });
        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();
        });
        document.addEventListener('DOMContentLoaded', function() {
            ['bannerSuccessToast', 'bannerInactiveToast'].forEach(function(id) {
                const toast = document.getElementById(id);
                if (toast) {
                    setTimeout(() => toast.classList.remove('show'), 4000);
                }
            });
            toggleLinkFields();
            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);
                } else {
                    preview.style.display = 'none';
                    uploadContent.style.display = 'flex';
                }
            });
        });
         $.validator.addMethod('filesize', function (value, element, param) {
                return this.optional(element) || (element.files[0].size <= param);
            }, 'File size must not exceed 1 MB.');

            $('#addBannerForm').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:  true,
                        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