@extends('adminlte::page')

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

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

@section('content')
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Add 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.saveOthersFacility') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" name="title" class="form-control" id="title" value="{{ old('title') }}" required>
                @error('title')
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <!-- <div class="form-group">
                    <label for="description">Description</label>
                    <textarea name="description" class="form-control" id="description" rows="4" required>{{ old('description') }}</textarea>
                    @error('description')
                        <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') }}</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')=='1' ? 'selected' : '' }}>Active</option>
                    <option value="0" {{ old('status')=='0' ? 'selected' : '' }}>Inactive</option>
                </select>
                @error('status')
                <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <!-- Banner Image Fields -->
            <!-- <div id="banner-images-container">
                <div class="form-group">
                    <label for="images">Images</label>
                    <input type="file" name="images[]" class="form-control" id="images" multiple>
                    @error('images')
                    <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

            </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 More</button>

            <div class="col-12">
                <label class="form-label">Description</label>
                <textarea name="image_description[]" rows="4"
                    class="form-control summernote @error('image_description.*') is-invalid @enderror"
                    placeholder="Short description / summary...">{{ old('image_description.0') }}</textarea>
                @error('image_description.*')
                <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div> -->
            <div id="banner-images-container">
                {{-- First block --}}
                <div class="image-section form-group mb-4 border p-3 rounded">
                    <label class="form-label">Image</label>
                    <input type="file" name="images[0]" 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="image_description[0]" rows="4"
                        class="form-control summernote @error('image_description.0') is-invalid @enderror"
                        placeholder="Short description / summary...">{{ old('image_description.0') }}</textarea>
                    @error('image_description.0')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror

                    <button type="button" class="btn btn-danger btn-sm mt-2 remove-btn" onclick="removeImageField(this)">Remove</button>
                </div>
            </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 More</button>

            <button type="submit" class="btn btn-success">Save</button>
        </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>
    $(document).ready(function () {
        $('.summernote').summernote({
            height: 300,
            placeholder: 'Enter content here...'
        });
    });

    let sectionCounter = 1;

    function previewImage(event, input) {
        let reader = new FileReader();
        reader.onload = function(){
            let img = input.closest('.image-section').querySelector('.image-preview');
            img.style.display = "block";
            img.src = reader.result;
        };
        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 = `
            <label class="form-label">Image</label>
            <input type="file" name="images[${sectionCounter}]" 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="image_description[${sectionCounter}]" rows="4"
                class="form-control summernote"
                placeholder="Short description / summary..."></textarea>

            <button type="button" class="btn btn-danger btn-sm mt-2 remove-btn" onclick="removeImageField(this)">Remove</button>
        `;

        container.appendChild(div);
        $(div).find('.summernote').summernote({
            height: 300,
            placeholder: 'Enter content here...'
        });
        sectionCounter++;
    }

    function removeImageField(button) {
        button.closest('.image-section').remove();
    }
</script>
@stop