@extends('adminlte::page')

@section('title', 'Edit Travel Guide Country')

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6 col-6">
            <h1>Edit Travel Guide Country</h1>
        </div>
    </div>
@stop


@section('content')
    <div class="row">
        <!-- left column -->
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="card box-primary">
      
                <!-- form start -->
                <form role="form" enctype="multipart/form-data" method="POST"
                      action="{{ route('admin.travel-guide.country.update',$country->id) }}">
                   
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label>Country Code</label>
                            <input type="text" class="form-control" name="country_code" placeholder="Country Code"
                                   value="{{ (empty(old('country_code')))?$country->letter_code:old('country_code') }}" required>
                        </div>
						
						<div class="form-group">
                            <label>Name</label>
                            <input type="text" class="form-control" name="country_name" placeholder="Country Name"
                                   value="{{ (empty(old('country_name')))?$country->name:old('country_name') }}" required>
                        </div>
						<div class="form-group">
                            <label>Slug</label>
                            <input type="text" class="form-control" name="slug" placeholder="Slug"
                                   value="{{ (empty(old('slug')))?$country->slug:old('slug') }}" required>
                        </div>
                        <div class="form-group">
                            <label>Badge</label>
                            <input type="text" class="form-control" name="badge" placeholder="Badge"
                                   value="{{ (empty(old('badge')))?$country->badge:old('badge') }}">
                        </div>
                        
                        <div class="form-group">
                            <label>Multi Names</label>
                            <input type="text" class="form-control" name="multi_names" placeholder="Multi Names"
                                   value="{{ (empty(old('multi_names')))?$country->multi_names:old('multi_names') }}" required>
                        </div>

						<div class="form-group">
                            <label>Image</label>
                            <input type="file" class="form-control" name="image" >
							@if(!empty($country->image))
								<div class="image-box">
									<img src="{{ $front_url.'travel_guide/country/'.$country->image }}" style="height: 25px;">
								</div>
							@endif
							
                        </div>

                        <div class="form-group">
                            <label>Banner Image</label>
                            <input type="file" class="form-control" name="banner_image" >
                            @if(!empty($country->banner_image))
                                <div class="image-box">
                                    <img src="{{ $front_url.'travel_guide/country/'.$country->banner_image }}" style="height: 25px;">
                                </div>
                            @endif
                            
                        </div>

                        <div class="form-group">
                            <label>Add More Images</label>
                            <input type="file" id="multiImageInput" name="other_image[]" multiple class="form-control">
                        </div>
                        {{-- <ul id="fileList" style="list-style: none; padding-left: 0;"></ul> --}}

                        @if($country->images->count())
                            <div id="existing-images" style="display:flex; gap:10px; flex-wrap:wrap;">
                                @foreach($country->images as $image)
                                    <div class="image-box" data-id="{{ $image->id }}" style="position:relative;">
                                        {{-- <img src="{{ asset('/travel_guide/country/' . $image->image) }}" width="100"> --}}
                                        <img src="{{ $front_url.'travel_guide/country/'.$image->image }}" style="height: 25px;">
                                        <input type="hidden" name="keep_images[]" value="{{ $image->id }}">
                                        <button type="button" class="remove-image" style="position:absolute; top:0; right:0; background:red; border:none; color:white;">&times;</button>
                                    </div>
                                @endforeach
                            </div>
                        @endif
						<div class="form-group">
                            <label>Description</label>
                            <input type="text" class="form-control" name="description" placeholder="Description"
                            value="{{ (empty(old('description')))?$country->description:old('description') }}" required>
                        </div>
                        
                        <div class="form-group">
                            <label>Meta Title</label>
                            <input type="text" class="form-control" name="meta_title" placeholder="Meta Title" value="{{ (empty(old('meta_title')))?$country->meta_title:old('meta_title') }}" >
                        </div>
                        <div class="form-group">
                            <label>Meta Description</label>
                            <input type="text" class="form-control" name="meta_description" placeholder="Meta Description" value="{{ (empty(old('meta_description')))?$country->meta_description:old('meta_description') }}" >
                        </div>
						
                        <div class="box-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                    <!-- /.box-body -->
             
                </form>
            </div>
            <!-- /.box -->
        </div>
    </div>
@stop

@section('css')
{{-- <style>
    #fileList span.file-item {
        display: inline-block;
        background: #f1f1f1;
        border-radius: 20px;
        padding: 5px 10px;
        margin: 4px 6px 4px 0;
        font-size: 14px;
    }

    #fileList span.file-item button.remove-btn {
        background: transparent;
        border: none;
        color: #e00;
        font-weight: bold;
        font-size: 16px;
        margin-left: 6px;
        cursor: pointer;
    }

    #fileList span.file-item button.remove-btn:hover {
        color: #a00;
    }
</style> --}}

@endsection

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const container = document.getElementById('existing-images');

    container?.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-image')) {
            const box = e.target.closest('.image-box');
            box.remove(); // Remove image + its hidden input
        }
    });
});
</script>

{{-- <script>
document.addEventListener('DOMContentLoaded', function () {
    const fileInput = document.getElementById('multiImageInput');
    const fileListContainer = document.getElementById('fileList');

    let selectedFiles = [];

    fileInput.addEventListener('change', function () {
        selectedFiles = [...selectedFiles, ...Array.from(fileInput.files)];
        renderFileList();
    });

    function renderFileList() {
        fileListContainer.innerHTML = '';

        selectedFiles.forEach((file, index) => {
            const span = document.createElement('span');
            span.className = 'file-item';
            span.innerHTML = `
                ${file.name}
                <button type="button" class="remove-btn" data-index="${index}" title="Remove">&times;</button>
            `;
            fileListContainer.appendChild(span);
        });
    }

    fileListContainer.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-btn')) {
            const index = e.target.getAttribute('data-index');
            selectedFiles.splice(index, 1);
            renderFileList();
        }
    });

    const form = fileInput.closest('form');
    form.addEventListener('submit', function () {
        const dataTransfer = new DataTransfer();
        selectedFiles.forEach(file => dataTransfer.items.add(file));
        fileInput.files = dataTransfer.files;
    });
});
</script> --}}


@endsection