@extends('adminlte::page')

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

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


@section('content')
    <div class="row">
        <!-- left column -->
        <div class="col-md-12">
            <div class="card box-primary">
                <!-- form start -->
                <form role="form" enctype="multipart/form-data" method="POST" action="{{ route('admin.travel-guide.country.store') }}" autocomplete="off">
                    @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="{{ 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="{{ old('country_name') }}" required>
                        </div>
						<div class="form-group">
                            <label>Slug</label>
                            <input type="text" class="form-control" name="slug" placeholder="Slug"
                                   value="{{ old('slug') }}" required>
                        </div>
                        <div class="form-group">
                            <label>Badge</label>
                            <input type="text" class="form-control" name="badge" placeholder="Badge"
                                   value="{{ old('badge') }}">
                        </div>
                        <div class="form-group">
                            <label>Multi Names</label>
                            <input type="text" class="form-control" name="multi_names" placeholder="Multi Names"
                                   value="{{ old('multi_names') }}" required>
                        </div>
                        <div class="form-group">
                            <label>Image</label>
                            <input type="file" class="form-control" name="image" required>
                        </div>
                        <div class="form-group">
                            <label>Banner Image</label>
                            <input type="file" class="form-control" name="banner_image" required>
                        </div>
						<div class="form-group">
                            <label>Add More Images</label>
                            <input type="file" id="multiImageInput" class="form-control" name="other_image[]" accept="image/*" multiple required >
                        </div>
                        {{-- <ul id="fileList" style="list-style: none; padding-left: 0;"></ul> --}}
                        {{-- <div id="previewContainer" style="display: flex; gap: 10px; flex-wrap: wrap;"></div> --}}
						<div class="form-group">
                            <label>Description</label>
                            <input type="text" class="form-control" name="description" placeholder="Description" required>
                        </div>
                        <div class="form-group">
                            <label>Meta Title</label>
                            <input type="text" class="form-control" name="meta_title" placeholder="Meta Title" >
                        </div>
                        <div class="form-group">
                            <label>Meta Description</label>
                            <input type="text" class="form-control" name="meta_description" placeholder="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 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> --}}

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

    let selectedFiles = [];

    fileInput.addEventListener('change', function () {
        // Add new files to existing selection
        selectedFiles = [...selectedFiles, ...Array.from(fileInput.files)];
        renderFileList();
    });

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

        selectedFiles.forEach((file, index) => {
            const li = document.createElement('li');
            li.style.marginBottom = '5px';
            li.innerHTML = `
                ${file.name}
                <button type="button" data-index="${index}" style="margin-left:10px; color:red;">❌</button>
            `;
            fileListContainer.appendChild(li);
        });
    }

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

    // On form submit, replace input files with filtered files
    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> --}}

  
@stop