@extends('adminlte::page')

@section('title', 'Edit Other Facility')

@section('content_header')
<h1>Edit Other Facility</h1>
@stop

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Edit Other Facility</h3>
        <div class="card-tools">
            <a href="{{ route('admin.showOthersFacility') }}" class="btn btn-primary btn-sm">Back to List</a>
        </div>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.updateOthersFacility', $facility->id) }}" method="POST"
            enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" name="title" class="form-control" id="title"
                    value="{{ old('title', $facility->title) }}" required>
                @error('title')
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <div class="col-12">
                <label class="form-label">Timing</label>
                <textarea name="description" id="description" rows="4"
                    class="form-control summernote @error('description') is-invalid @enderror"
                    placeholder="Short description / summary...">{{ old('description', $facility->description) }}</textarea>
                @error('description')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="status">Status</label>
                <select name="status" id="status" class="form-control" required>
                    <option value="1" {{ old('status', $facility->status) == '1' ? 'selected' : '' }}>Active</option>
                    <option value="0" {{ old('status', $facility->status) == '0' ? 'selected' : '' }}>Inactive</option>
                </select>
                @error('status')
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <!-- <div id="banner-images-container">
                <label class="form-label">Images</label>
                @foreach($facility->images as $image)
                <div class="form-group mb-3">
                    <input type="file" name="images[]" class="form-control" onchange="previewImage(event, this)">
                    <img src="{{ asset($image->image) }}" alt="Image Preview" class="img-fluid image-preview mt-2"
                        style="max-height: 100px;">
                </div>
                @endforeach
                @error('images')
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <p id="imageErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
            <button type="button" class="btn btn-sm btn-primary mt-2" onclick="addImageField()">+ Add Image</button>
            <div class="col-12">
                <label class="form-label">Image Descriptions</label>
                @foreach($facility->images as $index => $image)
                <div class="mb-3">
                    <label class="form-label">Description for Image {{ $index + 1 }}</label>
                    <textarea name="image_description[]" rows="4"
                        class="form-control summernote @error('image_description.' . $index) is-invalid @enderror"
                        placeholder="Short description / summary...">{{ old('image_description.' . $index, $image->image_description) }}</textarea>
                    @error('image_description.' . $index)
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                @endforeach
            </div> -->

          <div id="banner-images-container">
    <label class="form-label">Images & Descriptions</label>

    {{-- Existing images --}}
    @foreach($facility->images as $index => $image)
        <div class="image-section form-group mb-4 border p-3 rounded">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <strong>Existing Image {{ $index + 1 }}</strong>
                <button
                    type="button"
                    class="btn btn-sm btn-danger delete-image-btn"
                    data-url="{{ route('admin.deleteOthersFacilityImage', $image->id) }}">
                    Delete Image
                </button>
            </div>

            {{-- File Input --}}
            <input type="file" name="existing_images[{{ $image->id }}]" class="form-control mb-2" onchange="previewImage(event, this)">

            {{-- Preview --}}
            <img src="{{ asset($image->image) }}" 
                 alt="Image Preview" 
                 class="img-fluid image-preview mt-2"
                 style="max-height: 100px;">
            <br>
            {{-- Description --}}
            <label class="form-label mt-3">Description for Image {{ $index + 1 }}</label>
            <textarea name="existing_descriptions[{{ $image->id }}]" rows="3"
                class="form-control summernote @error('existing_descriptions.' . $image->id) is-invalid @enderror"
                placeholder="Short description / summary...">{{ old('existing_descriptions.' . $image->id, $image->image_description) }}</textarea>

            @error('existing_descriptions.' . $image->id)
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    @endforeach
</div>

{{-- Add button --}}
<p id="imageErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
<button type="button" class="btn btn-sm btn-primary mt-2" onclick="addImageField()">+ Add Section</button>

            <button type="submit" class="btn btn-success mt-3">Update</button>
        </form>

        <form id="delete-image-form" method="POST" style="display: none;">
            @csrf
        </form>
    </div>
</div>
@stop

@section('css')
<link rel="stylesheet" href="{{ asset('css/admin_custom.css') }}">
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
@stop

@section('js')
<script>
    // Brand colors configuration
    const brandTextColors = ['#002B10', '#FFFFFF', '#E1F5E1', '#FFFEE0', '#CAE9F5', '#FFC201', '#000000', '#6B6A6A', '#EFEDE3'];
    const brandTextColorNames = ['Tolly Green', 'White', 'Light Green', 'Pastel Yellow', 'Light Blue', 'Gold', 'Black', 'Grey', 'Off White'];

    // Summernote configuration
    const summernoteConfig = {
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link']],
            ['view', ['codeview']]
        ],
        fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '24', '28', '32', '36', '48'],
        colors: [brandTextColors],
        colorsName: [brandTextColorNames],
        colorButton: {
            foreColor: '#002B10',
            backColor: '#FFFFFF'
        },
        height: 250,
        callbacks: {
            onPaste: function (e) {
                var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                e.preventDefault();
                document.execCommand('insertText', false, bufferText);
            }
        }
    };

    // Initialize summernote on elements
    function initSummernote(selector) {
        $(selector).summernote(summernoteConfig);
    }

    let newSectionCounter = 0;

    // Initialize existing summernote instances
    $(document).ready(function() {
        initSummernote('.summernote');

        // Setup delete image button listeners
        const deleteImageForm = document.getElementById('delete-image-form');
        document.querySelectorAll('.delete-image-btn').forEach(function (button) {
            button.addEventListener('click', function () {
                if (confirm('Delete this image?')) {
                    deleteImageForm.action = this.dataset.url;
                    deleteImageForm.submit();
                }
            });
        });
    });

    function previewImage(event, input) {
        let reader = new FileReader();
        reader.onload = function(){
            let img = input.closest('.image-section, .form-group').querySelector('.image-preview');
            if (!img) {
                img = document.createElement("img");
                img.classList.add("img-fluid", "image-preview", "mt-2");
                img.style.maxHeight = "100px";
                input.closest('.image-section, .form-group').appendChild(img);
            }
            img.src = reader.result;
            img.style.display = "block";
        };
        if(event.target.files[0]) {
            reader.readAsDataURL(event.target.files[0]);
        }
    }

    function addImageField() {
        let container = document.getElementById('banner-images-container');
        let div = document.createElement('div');
        div.classList.add('image-section', 'form-group', 'mb-4', 'border', 'p-3', 'rounded');

        div.innerHTML = `
            <div class="d-flex justify-content-between align-items-center mb-2">
                <strong>New Section</strong>
                <button type="button" class="btn btn-sm btn-danger" onclick="this.closest('.image-section').remove()">Remove</button>
            </div>
            <input type="file" name="new_images[${newSectionCounter}]" class="form-control mb-2" onchange="previewImage(event, this)">
            <img class="img-fluid image-preview mt-2" style="max-height: 100px; display:none;">
            
            <label class="form-label mt-3">Description</label>
            <textarea name="new_image_descriptions[${newSectionCounter}]" rows="3"
                class="form-control summernote"
                placeholder="Short description / summary..."></textarea>
        `;

        container.appendChild(div);
        initSummernote($(div).find('.summernote'));
        newSectionCounter++;
    }
</script>

@stop