@php
    $edit = !empty($sponsorship->id);
@endphp
@extends('layouts.admin.master')

@section('title')
    {{ $edit ? 'Edit' : 'Create' }} Sponsorship
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between">
                            <h4 class="">{{ $edit ? 'Edit' : 'Create' }} Sponsorship</h4>
                            <a href="{{ route('admin.sponsorship.index') }}" class="create-button">
                                <i class="fas fa-backward"></i> Back
                            </a>
                        </div>

                        <form
                            action="{{ $edit ? route('admin.sponsorship.update', $sponsorship->id) : route('admin.sponsorship.store') }}"
                            method="POST" class="edit-add-form" enctype="multipart/form-data">
                            @csrf
                            @if ($edit)
                                @method('PUT')
                            @endif

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="title">Title <x-required/></label>
                                        <input type="text" class="form-control" name="title" id="title"
                                            value="{{ $edit ? $sponsorship->title : old('title') }}"
                                            placeholder="Enter Sponsorship Title" required
                                        />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 col-md-2">
                                    <div class="form-group">
                                        <label for="icon">Icon

                                            @if($edit && $sponsorship->icon)

                                                <a href="{{ asset('storage/' . $sponsorship->icon) }}" target="_blank">
                                                    View Icon
                                                </a>
                                            @endif

                                        </label>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="icon" name="icon">
                                            <label class="custom-file-label" for="icon">Choose file</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-2">
                                    <div class="form-group">
                                        <label for="order">Display Order <x-required/></label>
                                        <input type="number" class="form-control" name="display_order" id="order"
                                               value="{{ $edit ? $sponsorship->display_order : old('display_order', 0) }}"
                                               placeholder="0" required min="0"
                                        />
                                        <small class="form-text text-muted">Lower numbers appear first</small>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-2">
                                    <div class="form-group">
                                        <label for="icon">Amount <x-required/></label>
                                        <input type="number" class="form-control" name="amount" id="amount"
                                            value="{{ $edit ? $sponsorship->amount : old('amount') }}"
                                            placeholder="Enter Amount" required
                                        />
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-2">
                                    <div class="form-group">
                                        <label for="duration_type">Duration <x-required/></label>

                                        <input type="text" class="form-control" name="duration_type" id="duration_type"
                                            value="{{ $edit ? $sponsorship->duration_type : old('duration_type') }}"
                                            placeholder="Type Duration" required
                                        />

                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-2">
                                    <div class="form-group">
                                        <label for="is_most_popular">Is Most Popular</label>
                                        <select class="form-control" name="is_most_popular" id="is_most_popular">
                                            <option value="0" {{ (old('is_most_popular') == 0 || ($edit && $sponsorship->is_most_popular == 0)) ? 'selected' : '' }}>
                                                No
                                            </option>
                                            <option value="1" {{ (old('is_most_popular') == 1 || ($edit && $sponsorship->is_most_popular == 1)) ? 'selected' : '' }}>
                                                Yes
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-2">
                                    <div class="form-group">
                                        <label for="status">Status <x-required/></label>
                                        <select class="form-control" name="status" id="status" required>
                                            <option value="1" {{
                                                (($edit && $sponsorship->status == 1)) ? 'selected' : ''
                                            }}>
                                                Active
                                            </option>
                                            <option value="0" {{
                                                (($edit && $sponsorship->status == 0)) ? 'selected' : ''
                                            }}>
                                                Inactive
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="speech">Description <span style="color: red"> * </span></label>
                                        <textarea class="form-control" name="description" id="description" placeholder="Enter Description" rows="5"
                                            required>{{ $edit ? $sponsorship->description : old('description') }}</textarea>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <label for="advertisements" class="mb-0">
                                            Features <span style="color: red"> * </span>
                                        </label>
                                        <button type="button" id="addRow" class="btn btn-success btn-sm">+ Add More
                                        </button>
                                    </div>
                                    <table class="table table-bordered" id="advertisement_table">
                                        <thead>
                                            <tr>
                                                <th style="width: 25%">Category <span style="color: red">*</span></th>
                                                <th style="width: 50%">Description <span style="color: red">*</span></th>
                                                <th style="width: 15%">Qty <span style="color: red">*</span></th>
                                                <th style="width: 10%">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                // priority: old() -> sponsorship advertisements
                                                $featureCategoryIds = old('feature_categories') ?? ($edit && $sponsorship->advertisements ? $sponsorship->advertisements->pluck('category_id')->toArray() : []);
                                                $descriptions = old('feature_descriptions') ?? ($edit && $sponsorship->advertisements ? $sponsorship->advertisements->pluck('advertisement_name')->toArray() : []);
                                                $quantities = old('feature_quantities') ?? ($edit && $sponsorship->advertisements ? $sponsorship->advertisements->pluck('quantity')->toArray() : []);
                                                $count = max(count($featureCategoryIds), count($descriptions), count($quantities));
                                            @endphp

                                            @if($count > 0)
                                                @for($i = 0; $i < $count; $i++)
                                                    <tr>
                                                        <td>
                                                            <select name="feature_categories[]" class="form-control feature-category" required>
                                                                <option value="">Select Category</option>
                                                                @foreach($categories as $category)
                                                                    <option value="{{ $category->id }}"
                                                                        {{ (isset($featureCategoryIds[$i]) && $featureCategoryIds[$i] == $category->id) ? 'selected' : '' }}>
                                                                        {{ $category->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </td>
                                                        <td>
                                                            <textarea type="text" name="feature_descriptions[]" class="form-control feature-description"
                                                                    placeholder="Enter description"
                                                                   required>{{ $descriptions[$i] ?? '' }}</textarea>
                                                        </td>
                                                        <td>
                                                            <input type="number" name="feature_quantities[]" class="form-control feature-quantity"
                                                                   value="{{ $quantities[$i] ?? '' }}" placeholder="Qty" min="1"
                                                                   required>
                                                        </td>
                                                        <td>
                                                            @if($i > 0)
                                                                <button type="button" class="btn btn-danger btn-sm removeRow">
                                                                    Delete
                                                                </button>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @endfor
                                            @else
                                                <tr>
                                                    <td>
                                                        <select name="feature_categories[]" class="form-control feature-category" required>
                                                            <option value="">Select Category</option>
                                                            @foreach($categories as $category)
                                                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td>
                                                        <textarea type="text" name="feature_descriptions[]" class="form-control feature-description"
                                                                  placeholder="Enter description" required></textarea>
                                                    </td>
                                                    <td>
                                                        <input type="number" name="feature_quantities[]" class="form-control feature-quantity"
                                                               placeholder="Qty" min="1" required>
                                                    </td>
                                                    <td></td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary" id="submit">
                                <i class="fa fa-save"></i> {{ $edit ? 'Update' : 'Create' }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <!-- Summernote CSS -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <style>
        /* Summernote Mobile Responsive Styles */
        @media (max-width: 768px) {
            .note-editor .note-toolbar {
                flex-wrap: wrap;
            }

            .note-editor .note-toolbar .note-btn-group {
                margin-bottom: 5px;
            }

            .note-editor .note-editing-area {
                min-height: 150px;
            }

            .note-modal .modal-dialog {
                margin: 10px;
                max-width: calc(100% - 20px);
            }

            .note-popover {
                max-width: 250px;
            }
        }

        @media (max-width: 576px) {
            .note-editor .note-toolbar {
                padding: 5px;
            }

            .note-editor .note-toolbar .note-btn {
                padding: 4px 6px;
                margin: 1px;
            }
        }
    </style>
@endpush

@push('js')
    <x-generic-validation-error-toastr/>
    <!-- Summernote JS -->
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize Summernote for description
            $('#description').summernote({
                height: 300,
                minHeight: 200,
                maxHeight: 600,
                placeholder: 'Enter sponsorship description...',
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'italic', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link']],
                    ['view', ['codeview', 'undo', 'redo']]
                ],
                fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana'],
                fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32', '36', '48', '64'],
                dialogsInBody: true,
                dialogsFade: true,
                focus: false,
                tabDisable: false,
                styleTags: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
                callbacks: {
                    onInit: function() {
                        console.log('Summernote initialized for sponsorship description');
                    }
                }
            });

            $('.feature-description').summernote({
                height: 100,
                minHeight: 100,
                maxHeight: 300,
                placeholder: 'Enter sponsorship description...',
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'italic', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link']],
                    ['view', ['codeview', 'undo', 'redo']]
                ],
                fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana'],
                fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32', '36', '48', '64'],
                dialogsInBody: true,
                dialogsFade: true,
                focus: false,
                tabDisable: false,
                styleTags: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
                callbacks: {
                    onInit: function() {
                        console.log('Summernote initialized for sponsorship description');
                    }
                }
            });


            // Clean up Summernote on page unload
            $(window).on('beforeunload', function() {
                if ($('#description').length && $('#description').summernote) {
                    $('#description').summernote('destroy');
                }
            });
        });

        document.querySelector('.custom-file-input').addEventListener('change', function (e) {
            let fileName = e.target.files[0].name;
            e.target.nextElementSibling.innerText = fileName;
        });

        const EDIT = !!'{{ $edit }}';
        const editAddForm = $('.edit-add-form');

        // store validator instance
        const validator = editAddForm.validate({
            rules: {
                title: {
                    required: true
                },
                status: {
                    required: true
                },
                "feature_categories[]": {
                    required: true
                },
                "feature_descriptions[]": {
                    required: true
                },
                "feature_quantities[]": {
                    required: true,
                    min: 1
                },
                icon: {
                    extension: "jpg|jpeg|png"
                },
                display_order: {
                    required: true,
                    number: true,
                    min: 0
                },
                duration_type: {
                    required: true
                }
            },
            messages: {
                title: {
                    required: "Title is required"
                },
                status: {
                    required: "Please select status"
                },
                "feature_categories[]": {
                    required: "Category is required"
                },
                "feature_descriptions[]": {
                    required: "Description is required"
                },
                "feature_quantities[]": {
                    required: "Quantity is required",
                    min: "Quantity must be at least 1"
                },
                icon: {
                    extension: "Only JPG, JPEG, PNG files are allowed"
                },
                display_order: {
                    required: "Please enter display order",
                    number: "Please enter a valid number",
                    min: "Order must be at least 0"
                },
                duration_type: {
                    required: "Please select a duration"
                }
            },
            errorPlacement: function (error, element) {
                // Bootstrap friendly: place error under input
                if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function (htmlForm) {
                // Sync Summernote content before submission
                if ($('#description').summernote) {
                    $('#description').val($('#description').summernote('code'));
                }

                $('.overlay').show();
                const form = $(htmlForm);
                const formData = new FormData(htmlForm);
                const url = form.attr("action");

                if (EDIT) {
                    formData.append('_method', 'PUT');
                }

                $.ajax({
                    url: url,
                    data: formData,
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        $('.overlay').hide();
                        let alertType = response.alertType;
                        let alertMessage = response.message;
                        let alerter = toastr[alertType];
                        if (alerter) {
                            alerter(alertMessage);
                            setTimeout(function () {
                                if (response.redirectTo) {
                                    window.location.href = response.redirectTo;
                                }
                            }, 1500);
                        } else {
                            toastr.error("toastr alert-type " + alertType + " is unknown");
                        }
                    },
                    error: function (xhr) {
                        $('.overlay').hide();
                        var response = xhr.responseJSON;
                        if (response && response.errors) {
                            Object.keys(response.errors).forEach(function (field) {
                                const errorMessage = response.errors[field].join(", ");
                                toastr.error(errorMessage, "Validation Error");
                            });
                        }
                    }
                });
                return false;
            }
        });

        // Add Row
        $(document).on('click', '#addRow', function () {
            let categoryOptions = `
                <option value="">Select Category</option>
                @foreach($categories as $category)
                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                @endforeach
            `;

            let newRow = `
                            <tr>
                                <td>
                                    <select name="feature_categories[]" class="form-control feature-category" required>
                                        ${categoryOptions}
                                    </select>
                                </td>
                                <td>
                                    <textarea type="text" name="feature_descriptions[]" class="form-control feature-description" placeholder="Enter description" required></textarea>
                                </td>
                                <td>
                                    <input type="number" name="feature_quantities[]" class="form-control feature-quantity" placeholder="Qty" min="1" required>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-danger btn-sm removeRow">Delete</button>
                                </td>
                            </tr>
                        `;
            $("#advertisement_table tbody").append(newRow);

            $('.feature-description').summernote({
                height: 100,
                minHeight: 100,
                maxHeight: 300,
                placeholder: 'Enter sponsorship description...',
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'italic', 'clear']],
                    ['fontname', ['fontname']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link']],
                    ['view', ['codeview', 'undo', 'redo']]
                ],
                fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana'],
                fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32', '36', '48', '64'],
                dialogsInBody: true,
                dialogsFade: true,
                focus: false,
                tabDisable: false,
                styleTags: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
                callbacks: {
                    onInit: function() {
                        console.log('Summernote initialized for sponsorship description');
                    }
                }
            });

            // Attach validation rules to the newly added fields
            let newRow$ = $("#advertisement_table tbody tr:last");

            newRow$.find('.feature-category').rules("add", {
                required: true,
                messages: {
                    required: "Category is required"
                }
            });

            newRow$.find('.feature-description').rules("add", {
                required: true,
                messages: {
                    required: "Description is required"
                }
            });

            newRow$.find('.feature-quantity').rules("add", {
                required: true,
                min: 1,
                messages: {
                    required: "Quantity is required",
                    min: "Quantity must be at least 1"
                }
            });
        });


        // Delete Row
        $(document).on('click', '.removeRow', function () {
            $(this).closest('tr').remove();
        });

        // Add validation rules to existing fields on page load
        $('.feature-category').each(function() {
            $(this).rules("add", {
                required: true,
                messages: {
                    required: "Category is required"
                }
            });
        });

        $('.feature-description').each(function() {
            $(this).rules("add", {
                required: true,
                messages: {
                    required: "Description is required"
                }
            });
        });

        $('.feature-quantity').each(function() {
            $(this).rules("add", {
                required: true,
                min: 1,
                messages: {
                    required: "Quantity is required",
                    min: "Quantity must be at least 1"
                }
            });
        });

    </script>
@endpush