@extends('super_admin.layouts.master')
@section('content')
    <section class="content">
        <form action="{{ route('admin.store.package', $package?->id) }}" enctype="multipart/form-data" method="post">
            @csrf
            <div class="row p-4">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-body">
                            <h4>Package Details</h4>
                            <hr>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-2">
                                        <label for="name">Package Name</label>
                                        <input type="text" name="name" id="name" class=" form-control"
                                            value="{{ old('name', $package?->name) }}" placeholder="Package name">
                                        @error('name')
                                            <p class=" text-danger mb-0 text-sm">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-2">
                                        <label for="price">Package Price</label>
                                        <input type="number" name="price" id="price" class=" form-control"
                                            value="{{ old('price', $package?->price) }}" placeholder="Package price">
                                        @error('price')
                                            <p class=" text-danger mb-0 text-sm">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group mb-2">
                                        <label for="description">Package Description</label>
                                        <textarea name="description" id="description" class="" cols="30" placeholder="Package description"
                                            style="height: 400px">{{ old('description', $package?->description) }}</textarea>
                                        @error('description')
                                            <p class=" text-danger mb-0 text-sm">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group mb-2">
                                        <label for="itinerary">Itinerary Description</label>
                                        <textarea name="itinerary" id="itinerary" class="" cols="30" placeholder="Itinerary description"
                                            style="height: 400px">{{ old('itinerary', $package?->itinerary) }}</textarea>
                                        @error('itinerary')
                                            <p class=" text-danger mb-0 text-sm">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group mb-2">
                                        <label for="remarks">Remarks Description</label>
                                        <textarea name="remarks" id="remarks" class="" cols="30" placeholder="Remarks description"
                                            style="height: 400px">{{ old('remarks', $package?->remarks) }}</textarea>
                                        @error('remarks')
                                            <p class=" text-danger mb-0 text-sm">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group mb-2">
                                        <label for="package_gallery" class="form-label">Package Gallery</label>
                                        <div id="drop-area" class="border border-dashed p-4 text-center rounded"
                                            style="cursor: pointer;">
                                            <p class="mb-0">Drag & Drop images here or <span
                                                    class="text-primary">Browse</span></p>
                                            <input type="file" name="package_gallery[]" id="package_gallery"
                                                class="d-none" multiple accept="image/*">
                                        </div>
                                        @error('package_gallery')
                                            <p class="text-danger mb-0 text-sm">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div class="preview-container mt-3 d-flex flex-wrap gap-2" id="preview-container"></div>
                                    <input type="hidden" name="package_gallery_json" id="package_gallery_json">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body">
                            <h4>Other Details</h4>
                            <hr>
                            <div class="category_section">
                                @if (count($categories) <= 0)
                                    <a href="{{ route('admin.list.category') }}" class=" btn btn-primary">Create
                                        Category</a>
                                @else
                                    <div class="form-group mt-3">
                                        <label for="package_category_id">Select Category</label>
                                        <select name="package_category_id" class="form-control">
                                            <option value="">Select One</option>
                                            @foreach ($categories as $key => $cat)
                                                <option value="{{ $cat->id }}"
                                                    {{ $package && (isset($package->category) && $package->category->id == $cat->id) ? 'selected' : '' }}>
                                                    {{ $cat->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('package_category_id')
                                            <p class="text-danger mb-0 text-sm">{{ $message }}</p>
                                        @enderror
                                    </div>
                                @endif
                            </div>
                            <div class="form-group mt-3">
                                <label for="package_type">Package Type</label>
                                <select name="package_type" class="form-control">
                                    <option value="">Select Package Type</option>
                                    @foreach (\App\Models\Package::getPackageTypes() as $key => $type)
                                        <option value="{{ $key }}"
                                            {{ $package && $package->package_type == $key ? 'selected' : '' }}>
                                            {{ $type }}</option>
                                    @endforeach
                                </select>
                                @error('package_type')
                                    <p class="text-danger mb-0 text-sm">{{ $message }}</p>
                                @enderror
                            </div>
                            <h6 class=" mt-4">Contact Details</h6>
                            <hr>
                            @if ($package)
                                @php
                                    $contactData = $package->contact_information;
                                @endphp
                            @endif
                            <div class="contact_details">
                                <div class="form-group">
                                    <label for="primary_mobile_number">Primary Mobile</label>
                                    <input type="text" class=" form-control" name="primary_mobile_number"
                                        id="primary_mobile_number"
                                        value="{{ old('primary_mobile_number', isset($contactData) ? $contactData['primary_mobile_number'] : '') }}"
                                        placeholder="Primary Mobile Number">
                                    @error('primary_mobile_number')
                                        <p class=" text-danger mb-0 text-sm">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="secondary_mobile_number">Secondary Mobile</label>
                                    <input type="text" class=" form-control" name="secondary_mobile_number"
                                        id="secondary_mobile_number"
                                        value="{{ old('secondary_mobile_number', isset($contactData) ? $contactData['secondary_mobile_number'] : '') }}"
                                        placeholder="Secondary Mobile Number">
                                    @error('secondary_mobile_number')
                                        <p class=" text-danger mb-0 text-sm">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="primary_email_number">Primary Email</label>
                                    <input type="email" class=" form-control" name="primary_email_number"
                                        id="primary_email_number"
                                        value="{{ old('primary_email_number', isset($contactData) ? $contactData['primary_email_number'] : '') }}"
                                        placeholder="Primary Email">
                                    @error('primary_email_number')
                                        <p class=" text-danger mb-0 text-sm">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="secondary_email_number">Secondary Mobile</label>
                                    <input type="email" class=" form-control" name="secondary_email_number"
                                        id="secondary_email_number"
                                        value="{{ old('secondary_email_number', isset($contactData) ? $contactData['secondary_email_number'] : '') }}"
                                        placeholder="Secondary Email">
                                    @error('secondary_email_number')
                                        <p class=" text-danger mb-0 text-sm">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="address">Address</label>
                                    <textarea id="address" cols="30" rows="5" class=" form-control" name="address" id="address"
                                        placeholder="Address">{{ old('address', isset($contactData) ? $contactData['address'] : '') }}</textarea>
                                    @error('address')
                                        <p class=" text-danger mb-0 text-sm">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="stay_duration">Package Duration</label>
                                    <input type="text" class=" form-control" name="stay_duration" id="stay_duration"
                                        value="{{ old('stay_duration', $package?->stay_duration) }}"
                                        placeholder="Package Duration">
                                    @error('stay_duration')
                                        <p class=" text-danger mb-0 text-sm">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class=" form-group form-check">
                                    <input type="checkbox" class=" form-check-input" name="is_active" id="is_active"
                                        value="1" {{ $package && !$package->is_active ? '' : 'checked' }}>
                                    <label for="is_active" class=" mb-0 form-check-label">Status</label>
                                    @error('is_active')
                                        <p class=" text-danger mb-0 text-sm">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class=" form-group">
                                    <button type="submit"
                                        class=" btn btn-primary btn-block">{{ $package ? 'Update Package' : 'Create Package' }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </section>
@endsection
@section('custom_script')
    <script>
        ClassicEditor.create(document.querySelector('#description'), {
                toolbar: [
                    'heading', '|',
                    'bold', 'italic', 'underline', '|',
                    'alignment', 'outdent', 'indent', '|',
                    'bulletedList', 'numberedList', '|',
                    'blockQuote', 'link', '|',
                    'insertTable', 'imageUpload', 'mediaEmbed', '|',
                    'undo', 'redo', '|',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
                    'code', 'codeBlock', 'htmlEmbed', 'horizontalLine', '|',
                    'specialCharacters', 'superscript', 'subscript', '|',
                    'findAndReplace', 'selectAll', 'textPartLanguage', 'sourceEditing'
                ],
                language: 'en',
                alignment: {
                    options: ['left', 'center', 'right', 'justify']
                },
                image: {
                    toolbar: [
                        'imageTextAlternative', 'imageStyle:full', 'imageStyle:side', 'linkImage'
                    ]
                },
                table: {
                    contentToolbar: [
                        'tableColumn', 'tableRow', 'mergeTableCells'
                    ]
                },
                mediaEmbed: {
                    previewsInData: true
                },
                placeholder: 'Start typing your text...',
                removePlugins: ['EasyImage', 'CloudServices'],
                ckfinder: {
                    uploadUrl: '/public/upload/images' // set your image upload URL here
                },
                htmlSupport: {
                    allow: [{
                        name: 'img',
                        attributes: ['src', 'alt', 'title'],
                        classes: ['img-fluid', 'img-thumbnail'],
                        styles: ['width', 'height']
                    }]
                }
            })
            .catch(error => {
                console.error(error);
            });

        ClassicEditor.create(document.querySelector('#itinerary')).catch(error => {
            console.error(error);
        });
        ClassicEditor.create(document.querySelector('#remarks')).catch(error => {
            console.error(error);
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const dropArea = document.getElementById('drop-area');
            const fileInput = document.getElementById('package_gallery');
            const previewContainer = document.getElementById('preview-container');
            const hiddenInput = document.getElementById('package_gallery_json');
            let filesArray = [];

            dropArea.addEventListener('click', () => fileInput.click());

            dropArea.addEventListener('dragover', (e) => {
                e.preventDefault();
                dropArea.classList.add('border-primary');
            });

            dropArea.addEventListener('dragleave', () => {
                dropArea.classList.remove('border-primary');
            });

            dropArea.addEventListener('drop', (e) => {
                e.preventDefault();
                dropArea.classList.remove('border-primary');
                handleFiles(e.dataTransfer.files);
            });

            fileInput.addEventListener('change', (e) => handleFiles(e.target.files));

            function handleFiles(files) {
                Array.from(files).forEach((file) => {
                    if (!filesArray.some(f => f.name === file.name)) {

                        filesArray.push(file);
                        updateFileInput();

                        const reader = new FileReader();
                        reader.onload = (e) => {
                            const imageWrapper = document.createElement('div');
                            imageWrapper.classList.add('position-relative');
                            imageWrapper.style.width = '100px';
                            imageWrapper.style.height = '100px';

                            const img = document.createElement('img');
                            img.src = e.target.result;
                            img.classList.add('img-thumbnail');
                            img.style.width = '100%';
                            img.style.height = '100%';
                            img.style.objectFit = 'cover';
                            img.style.borderRadius = '5px';

                            const removeBtn = document.createElement('button');
                            removeBtn.innerHTML = '&times;';
                            removeBtn.classList.add('btn', 'btn-danger', 'btn-sm', 'position-absolute',
                                'top-0', 'end-0');
                            removeBtn.style.borderRadius = '50%';

                            removeBtn.addEventListener('click', () => {
                                filesArray = filesArray.filter(f => f.name !== file.name);
                                imageWrapper.remove();
                                updateFileInput();
                            });

                            imageWrapper.appendChild(img);
                            imageWrapper.appendChild(removeBtn);
                            previewContainer.appendChild(imageWrapper);
                        };
                        reader.readAsDataURL(file);
                    }
                });
            }

            function updateFileInput() {
                const dataTransfer = new DataTransfer();
                filesArray.forEach(file => dataTransfer.items.add(file));
                fileInput.files = dataTransfer.files;
                hiddenInput.value = JSON.stringify(filesArray.map(f => f.name));
            }

            document.getElementById("uploadForm").addEventListener("submit", (e) => {
                if (filesArray.length === 0) {
                    alert("Please select at least one image before submitting.");
                    e.preventDefault();
                }
            });
        });
    </script>
@endsection