@extends('admin.layouts.master')
@section('title', 'New Package')

@section('content')
<div class="row fv-plugins-icon-container">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between">
                <h5 class="card-title mb-0">New Package</h5>
                <a class="btn btn-sm btn-primary waves-effect waves-light" href="{{ route('admin.package.list') }}">
                    <i class="me-1 fa-solid fa-chevron-left"></i> Back
                </a>
            </div>

            @if(session('message'))
            <div class="alert alert-success">{{ session('message') }}</div>
            @endif

            @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

            <div class="card-body">
                <form method="POST" action="{{ route('admin.package.save') }}" enctype="multipart/form-data" class="fv-plugins-bootstrap5">
                    @csrf
                    <div class="row">

                        {{-- Title --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Title <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title') }}" required>
                            @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        {{-- Country --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Country <span class="text-danger">*</span></label>
                            <select name="country_id" class="form-select @error('country_id') is-invalid @enderror" required>
                                <option value="">-- Select Country --</option>
                                @foreach($countries as $country)
                                <option value="{{ $country->id }}" {{ old('country_id') == $country->id ? 'selected' : '' }}>
                                    {{ $country->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('country_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Destination --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Destination <span class="text-danger">*</span></label>
                            <select name="destination_id" class="form-select @error('destination_id') is-invalid @enderror" required>
                                <option value="">-- Select Destination --</option>
                                @foreach($destinations as $destination)
                                <option value="{{ $destination->id }}" {{ old('destination_id') == $destination->id ? 'selected' : '' }}>
                                    {{ $destination->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('destination_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
<div class="mb-3 col-md-12">
    <label class="form-label">Select Sightseeings</label>
    <select name="sightseeings[]" class="form-select" multiple>
        @foreach($sightseeings as $sight)
            <option value="{{ $sight->id }}"
                {{ (collect(old('sightseeings'))->contains($sight->id)) ? 'selected' : '' }}>
                {{ $sight->location }} - Day {{ $sight->day_number }}
            </option>
        @endforeach
    </select>
</div>
<button type="button" onclick="clearSelect('sightseeings')">Clear Sightseeings</button>

<div class="mb-3 col-md-12">
    <label class="form-label">Select terms and conditions</label>
    <select name="sections[]" class="form-select" multiple>
        @foreach($sections as $section)
            <option value="{{ $section->id }}"
                {{ (collect(old('sections'))->contains($section->id)) ? 'selected' : '' }}>
                {{ $section->heading }}
            </option>
        @endforeach
    </select>
</div>
<button type="button" onclick="clearSelect('sections')">Clear Sections</button>


                        {{-- Tagline --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Tagline</label>
                            <input type="text" name="tagline" class="form-control @error('tagline') is-invalid @enderror" value="{{ old('tagline') }}">
                            @error('tagline')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        {{-- Duration Days --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Duration (Days) <span class="text-danger">*</span></label>
                            <input type="number" name="duration_days" class="form-control @error('duration_days') is-invalid @enderror" value="{{ old('duration_days') }}" required>
                            @error('duration_days')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        {{-- Trip Type --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Trip Type</label>
                            <input type="text" name="trip_type" class="form-control @error('trip_type') is-invalid @enderror" value="{{ old('trip_type') }}" placeholder="World Tripz, India Tripz, Dream Tripz, Special Tripz, Hot Tripz
">
                            @error('trip_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                  {{-- Price Per Person (Readonly) --}}
<div class="mb-3 col-md-6">
    <label class="form-label">Price Per Person</label>
    <input type="number" step="0.01" id="price_per_person" name="price_per_person"
           class="form-control" value="" readonly>
</div>


                        {{-- Description --}}
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Description <span class="text-danger">*</span></label>
                            <textarea name="description" rows="4" class="form-control @error('description') is-invalid @enderror" required>{{ old('description') }}</textarea>
                            @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Featured & Best Selling --}}
                        <div class="mb-3 col-md-12">
                            <div class="form-check form-check-inline">
                                <input type="checkbox" name="is_featured" id="is_featured" class="form-check-input" {{ old('is_featured') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_featured">Featured</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="checkbox" name="is_best_selling" id="is_best_selling" class="form-check-input" {{ old('is_best_selling') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_best_selling">Best Selling</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="checkbox" name="is_popular" id="is_popular" class="form-check-input" {{ old('is_popular') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_popular">Popular</label>
                            </div>
                        </div>

                        {{-- Itineraries (dynamic) --}}
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Itineraries <span class="text-danger">*</span></label>
                            <div id="itineraries-wrapper">
                                {{-- Repeat this block for each itinerary day (can use JS to add more dynamically) --}}
                                <div class="itinerary-day mb-3 border p-3 rounded">
                                    <div class="row g-3 align-items-center">
                                            <div class="col-md-4">
                                            <input type="text" name="itineraries[0][region]" class="form-control" placeholder="Region" value="{{ old('itineraries.0.region') }}" required>
                                        </div>
                                        <div class="col-md-2">
                                            <input type="number" name="itineraries[0][day_number]" class="form-control" placeholder="Day #" value="{{ old('itineraries.0.day_number') }}" required>
                                        </div>
                                        <div class="col-md-4">
                                            <input type="text" name="itineraries[0][title]" class="form-control" placeholder="Title" value="{{ old('itineraries.0.title') }}" required>
                                        </div>
                                        <div class="col-md-4">
                                            <input type="text" name="itineraries[0][description]" class="form-control" placeholder="Description" value="{{ old('itineraries.0.description') }}" required>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-danger btn-sm remove-itinerary-btn">Remove</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" id="add-itinerary-btn" class="btn btn-sm btn-secondary">Add Day</button>
                        </div>

                        {{-- Current Images --}}


                        {{-- Images Upload --}}
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Upload New Images</label>
                            <input type="file" name="images[]" id="image-input" class="form-control @error('images.*') is-invalid @enderror" multiple accept="image/*">
                            @error('images.*')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Preview container for new images --}}
                        <div id="image-preview" class="d-flex flex-wrap gap-2 mb-3"></div>
                        {{-- Agency Name --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Agency Name</label>
                            <input type="text" name="agency_name" class="form-control @error('agency_name') is-invalid @enderror" value="{{ old('agency_name') }}">
                            @error('agency_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
{{-- Notes --}}
<div class="mb-3 col-md-12">
    <label class="form-label">Notes</label>
    <textarea name="notes" id="notes-editor" class="form-control">{{ old('notes') }}</textarea>
</div>

{{-- Highlights --}}
<div class="mb-3 col-md-12">
    <label class="form-label">Highlights</label>
    <textarea name="highlights" id="highlights-editor" class="form-control">{{ old('highlights') }}</textarea>
</div>





                        {{-- Duration Nights --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Duration (Nights)</label>
                            <input type="number" name="duration_nights" class="form-control @error('duration_nights') is-invalid @enderror" value="{{ old('duration_nights') }}">
                            @error('duration_nights')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Group Min --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Minimum Group Size</label>
                            <input type="number" name="group_min" class="form-control @error('group_min') is-invalid @enderror" value="{{ old('group_min') }}">
                            @error('group_min')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Group Max --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Maximum Group Size</label>
                            <input type="number" name="group_max" class="form-control @error('group_max') is-invalid @enderror" value="{{ old('group_max') }}">
                            @error('group_max')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Departure Point --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Departure Point</label>
                            <input type="text" name="departure_point" class="form-control @error('departure_point') is-invalid @enderror" value="{{ old('departure_point') }}">
                            @error('departure_point')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
{{-- Departure Date (Optional) --}}
<div class="mb-3 col-md-6">
    <label class="form-label">Departure Date</label>
    <input type="date" name="departure_date" class="form-control @error('departure_date') is-invalid @enderror" value="{{ old('departure_date') }}">
    @error('departure_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

{{-- Return Date (Optional) --}}
<div class="mb-3 col-md-6">
    <label class="form-label">Return Date</label>
    <input type="date" name="return_date" class="form-control @error('return_date') is-invalid @enderror" value="{{ old('return_date') }}">
    @error('return_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

                        {{-- Departure Time --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Departure Time</label>
                            <input type="time" name="departure_time" class="form-control @error('departure_time') is-invalid @enderror" value="{{ old('departure_time') }}">
                            @error('departure_time')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Return Time --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Return Time</label>
                            <input type="time" name="return_time" class="form-control @error('return_time') is-invalid @enderror" value="{{ old('return_time') }}">
                            @error('return_time')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Dress Code --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Dress Code</label>
                            <input type="text" name="dress_code" class="form-control @error('dress_code') is-invalid @enderror" value="{{ old('dress_code') }}">
                            @error('dress_code')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                      {{-- Original Price --}}
<div class="mb-3 col-md-6">
    <label class="form-label">Original Price<span class="text-danger">*</span></label>
    <input type="number" step="0.01" name="original_price" id="original_price"
           class="form-control @error('original_price') is-invalid @enderror"
           value="{{ old('original_price') }}" required>
    @error('original_price')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

{{-- Discount Price --}}
<div class="mb-3 col-md-6">
    <label class="form-label">Discount Price</label>
    <input type="number" step="0.01" name="discount_price" id="discount_price"
           class="form-control @error('discount_price') is-invalid @enderror"
           value="{{ old('discount_price') }}">
    @error('discount_price')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

                        {{-- Price Includes --}}
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Price Includes (JSON format ex: ["Flight to Nepal", "Travel Insurance"] )</label>
                            <textarea name="price_includes" rows="3" class="form-control @error('price_includes') is-invalid @enderror">{{ old('price_includes') }}</textarea>
                            @error('price_includes')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Price Excludes --}}
                        <div class="mb-3 col-md-12">
                            <label class="form-label">Price Excludes (JSON format ex: ["Flight to Nepal", "Travel Insurance"] )</label>
                            <textarea name="price_excludes" rows="3" class="form-control @error('price_excludes') is-invalid @enderror">{{ old('price_excludes') }}</textarea>
                            @error('price_excludes')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>



                    </div>

                    <div class="mt-3">
                        <button type="submit" class="btn btn-sm btn-primary me-2 waves-effect waves-light">Save Package</button>
                        <button type="reset" class="btn btn-sm btn-secondary waves-effect">Reset</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- JS for dynamic itinerary rows --}}

<script>
    let itineraryIndex = 1;

    document.getElementById('add-itinerary-btn').addEventListener('click', function() {
        const wrapper = document.getElementById('itineraries-wrapper');

        const newItinerary = document.createElement('div');
        newItinerary.classList.add('itinerary-day', 'mb-3', 'border', 'p-3', 'rounded');

        newItinerary.innerHTML = `
            <div class="row g-3 align-items-center">
              <div class="col-md-2">
                    <input type="text" name="itineraries[${itineraryIndex}][region]" class="form-control" placeholder="Region" required>
                </div>
                <div class="col-md-2">
                    <input type="number" name="itineraries[${itineraryIndex}][day_number]" class="form-control" placeholder="Day #" required>
                </div>
                <div class="col-md-4">
                    <input type="text" name="itineraries[${itineraryIndex}][title]" class="form-control" placeholder="Title" required>
                </div>
                <div class="col-md-4">
                    <input type="text" name="itineraries[${itineraryIndex}][description]" class="form-control" placeholder="Description" required>
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger btn-sm remove-itinerary-btn">Remove</button>
                </div>
            </div>
        `;

        wrapper.appendChild(newItinerary);

        itineraryIndex++;
    });

    // Delegate click event for dynamically added remove buttons
    document.getElementById('itineraries-wrapper').addEventListener('click', function(e) {
        if (e.target && e.target.classList.contains('remove-itinerary-btn')) {
            e.target.closest('.itinerary-day').remove();
        }
    });
</script>
<script>
    document.getElementById('image-input').addEventListener('change', function(event) {
        const container = document.getElementById('image-preview');
        container.innerHTML = ''; // Clear existing previews

        const files = Array.from(event.target.files);
        const newFileList = new DataTransfer(); // For reconstructing the input's file list

        files.forEach((file, index) => {
            if (!file.type.startsWith('image/')) return;

            const reader = new FileReader();
            reader.onload = function(e) {
                const wrapper = document.createElement('div');
                wrapper.classList.add('position-relative');

                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.height = '80px';
                img.style.borderRadius = '4px';
                img.style.marginRight = '8px';

                const removeBtn = document.createElement('button');
                removeBtn.innerHTML = '&times;';
                removeBtn.type = 'button';
                removeBtn.classList.add('btn', 'btn-sm', 'btn-danger');
                removeBtn.style.position = 'absolute';
                removeBtn.style.top = '0';
                removeBtn.style.right = '0';
                removeBtn.style.padding = '0 6px';
                removeBtn.style.fontWeight = 'bold';
                removeBtn.style.borderRadius = '50%';
                removeBtn.style.lineHeight = '1';
                removeBtn.title = 'Remove';

                // Remove file and preview on click
                removeBtn.addEventListener('click', () => {
                    files.splice(index, 1);
                    const updatedList = files.filter((_, i) => i !== index);
                    const newTransfer = new DataTransfer();
                    updatedList.forEach(f => newTransfer.items.add(f));
                    event.target.files = newTransfer.files;

                    // Re-trigger change to re-render
                    const changeEvent = new Event('change');
                    event.target.dispatchEvent(changeEvent);
                });

                wrapper.appendChild(img);
                wrapper.appendChild(removeBtn);
                container.appendChild(wrapper);
            };

            reader.readAsDataURL(file);
            newFileList.items.add(file);
        });

        // Set filtered file list to input (preserves user input)
        event.target.files = newFileList.files;
    });
</script>

<script>
function clearSelect(selectName) {
    const select = document.getElementsByName(selectName + '[]')[0];
    for (let option of select.options) {
        option.selected = false;
    }
}
</script>
<script src="https://cdn.tiny.cloud/1/4aw9c9k7vzjg55kttf2mb2eaiwic1kmeb5fy898veu0j1mm2/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

<script>
    // TinyMCE Init
    tinymce.init({
        selector: '#highlights-editor, #notes-editor',
        height: 300,
        menubar: false,
        plugins: 'advlist autolink lists link image charmap preview anchor pagebreak',
        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat'
    });

    function previewImage(event) {
        const input = event.target;
        const preview = document.getElementById('preview');
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function (e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
<script>
    function updatePricePerPerson() {
        const originalPrice = parseFloat(document.getElementById('original_price').value) || 0;
        const discountPrice = parseFloat(document.getElementById('discount_price').value) || 0;

        const finalPrice = discountPrice > 0 ? discountPrice : originalPrice;

        document.getElementById('price_per_person').value = finalPrice.toFixed(2);
    }

    document.addEventListener('DOMContentLoaded', function () {
        updatePricePerPerson();

        document.getElementById('original_price').addEventListener('input', updatePricePerPerson);
        document.getElementById('discount_price').addEventListener('input', updatePricePerPerson);
    });
</script>

@endsection
@push('js')

<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function () {
        // Apply select2 to all select elements
        $('select').select2({
            width: '100%',
            allowClear: true,
            placeholder: function() {
                return $(this).data('placeholder') || 'Select an option';
            }
        });
    });
</script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />


@endpush