@extends('admin.layouts.master')
@section('title', 'Edit 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">Edit 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.update', encrypt($package->id)) }}" 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', $package->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>
                            {{-- Country --}}
                            <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 }}"
                                    @if(old('country_id', $package->country_id) == $country->id) selected @endif>
                                    {{ $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>
                            {{-- Destination --}}
                            <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 }}"
                                    @if(old('destination_id', $package->destination_id) == $destination->id) selected @endif>
                                    {{ $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 }}"
                @if(isset($package) && $package->sightseeings->contains('id', $sight->id)) selected @endif>
                {{ $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 }}"
                @if(isset($package) && $package->sections->contains('id', $section->id)) selected @endif>
                {{ $section->heading }}
            </option>
        @endforeach
    </select>
</div>
<button type="button" onclick="clearSelect('sections')">Clear Sections</button>

                        {{-- 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', $package->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', $package->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 (calculated from original or discount) --}}
<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', $package->description) }}</textarea>
                            @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Featured, Best Selling & Popular --}}
                        <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', $package->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', $package->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', $package->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">
                                @php
                                $oldItineraries = old('itineraries', $package->itineraries ?? []);
                                @endphp
                                @foreach($oldItineraries as $index => $itinerary)
                                <div class="itinerary-day mb-3 border p-3 rounded">
                                    <div class="row g-3 align-items-center">
                                             <div class="col-md-2">
                                            <input type="text" name="itineraries[{{ $index }}][region]" class="form-control" placeholder="Region" value="{{ $itinerary['region'] ?? '' }}" required>
                                        </div>
                                        <div class="col-md-2">
                                            <input type="number" name="itineraries[{{ $index }}][day_number]" class="form-control" placeholder="Day #" value="{{ $itinerary['day_number'] ?? '' }}" required>
                                        </div>
                                        <div class="col-md-4">
                                            <input type="text" name="itineraries[{{ $index }}][title]" class="form-control" placeholder="Title" value="{{ $itinerary['title'] ?? '' }}" required>
                                        </div>
                                        <div class="col-md-4">
                                            <input type="text" name="itineraries[{{ $index }}][description]" class="form-control" placeholder="Description" value="{{ $itinerary['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>
                                @endforeach
                            </div>
                            <button type="button" id="add-itinerary-btn" class="btn btn-sm btn-secondary">Add Day</button>
                        </div>

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

                        {{-- Preview New Images --}}
                        {{-- Preview container for new images --}}
                        <div id="imagePreviewContainer" class="d-flex flex-wrap gap-2 mb-3"></div>

                        @if($package->images)
                        <div class="mt-3">
                            <strong>Current Images:</strong>
                            <div class="d-flex flex-wrap gap-2 mt-1">
                                @foreach($package->images as $image)
                                @php
                                $imagePaths = json_decode($image->image_path, true);
                                $imgSrc = is_string($imagePaths) ? trim($imagePaths, '"') : ($imagePaths[0] ?? '');
                                @endphp

                                <div class="image-container" style="position: relative; display: inline-block;">
                                    @if($imgSrc)
                                    <img src="{{ $imgSrc }}" alt="Package Image" style="height:80px; border-radius:4px;">
                                    @endif

                                    <input type="checkbox" name="remove_images[]" value="{{ $image->id }}" style="display:none;" />


                                    <button type="button" class="btn btn-sm btn-danger remove-image-btn"
                                        style="position: absolute; top: 2px; right: 2px; padding: 0 6px; font-weight: bold; border-radius: 50%; line-height: 1;"
                                        data-image-id="{{ $image->id }}" title="Remove Image">&times;</button>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif



                        {{-- Tagline --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Tagline</label>
                            <input type="text" name="tagline" class="form-control" value="{{ old('tagline', $package->tagline) }}">
                        </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" value="{{ old('agency_name', $package->agency_name) }}">
                        </div>

{{-- Highlights --}}
<div class="mb-3 col-md-12">
    <label class="form-label">Highlights</label>
    <textarea name="highlights" id="highlights-editor" 
              class="form-control @error('highlights') is-invalid @enderror">{{ old('highlights', $package->highlights) }}</textarea>
    @error('highlights')
        <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 @error('notes') is-invalid @enderror">{{ old('notes', $package->notes) }}</textarea>
    @error('notes')
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</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" value="{{ old('duration_nights', $package->duration_nights) }}">
                        </div>

                        {{-- Group Min --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Group Minimum</label>
                            <input type="number" name="group_min" class="form-control" value="{{ old('group_min', $package->group_min) }}">
                        </div>

                        {{-- Group Max --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Group Maximum</label>
                            <input type="number" name="group_max" class="form-control" value="{{ old('group_max', $package->group_max) }}">
                        </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" value="{{ old('departure_point', $package->departure_point) }}">
                        </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') ?? ($package->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') ?? ($package->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="text" name="departure_time" class="form-control" value="{{ old('departure_time', $package->departure_time) }}">
                        </div>

                        {{-- Return Time --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Return Time</label>
                            <input type="text" name="return_time" class="form-control" value="{{ old('return_time', $package->return_time) }}">
                        </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" value="{{ old('dress_code', $package->dress_code) }}">
                        </div>

                        {{-- Price Includes --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Price Includes (JSON format ex: ["Flight to Nepal", "Travel Insurance"] )</label>
                            <textarea name="price_includes" class="form-control">{{ old('price_includes', $package->price_includes) }}</textarea>
                        </div>

                        {{-- Price Excludes --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Price Excludes (JSON format ex: ["Flight to Nepal", "Travel Insurance"] ) </label>
                            <textarea name="price_excludes" class="form-control">{{ old('price_excludes', $package->price_excludes) }}</textarea>
                        </div>

                   <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" value="{{ old('original_price', $package->original_price ?? '') }}" required>
</div>

<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" value="{{ old('discount_price', $package->discount_price ?? '') }}">
</div>


                    </div>

                    <div class="mt-3">
                        <button type="submit" class="btn btn-sm btn-primary me-2 waves-effect waves-light">Update 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 = {{ count(old('itineraries', $package->itineraries ?? [])) }};



    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('imageUpload').addEventListener('change', function(event) {
        const container = document.getElementById('imagePreviewContainer');
        container.innerHTML = ''; // clear existing previews

        Array.from(event.target.files).forEach(file => {
            if (!file.type.startsWith('image/')) return;

            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.height = '80px';
                img.style.borderRadius = '4px';
                container.appendChild(img);
            };
            reader.readAsDataURL(file);
        });
    });
</script>
<script>
    document.querySelectorAll('.remove-image-btn').forEach(button => {
        button.addEventListener('click', function() {
            const confirmDelete = confirm('Are you sure you want to delete this image?');
            if (!confirmDelete) return;

            const container = this.parentElement;
            const checkbox = container.querySelector('input[type="checkbox"]');

            if (checkbox) {
                checkbox.checked = true;
                console.log("Checked checkbox for image ID:", checkbox.value); // ← Add this
                container.style.display = 'none';
            }
        });
    });
</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 calculatePricePerPerson() {
        const original = parseFloat(document.getElementById('original_price').value) || 0;
        const discount = parseFloat(document.getElementById('discount_price').value) || 0;

        const pricePerPerson = discount > 0 ? discount : original;

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

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

        document.getElementById('original_price').addEventListener('input', calculatePricePerPerson);
        document.getElementById('discount_price').addEventListener('input', calculatePricePerPerson);
    });
</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