@extends('layouts.app')

@section('content')

    <div class="card">

        <div class="card-header">
            <h3>Edit Package</h3>
        </div>

        <div class="card-body">

            <form action="{{ route('packages.update', $package->id) }}" method="POST" enctype="multipart/form-data">

                @csrf
                @method('PUT')

                <div class="container-fluid">

                    {{-- NAME --}}
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Name *</label>
                        <div class="col-md-7">
                            <input type="text" name="name"
                                class="form-control @error('name') is-invalid @enderror"
                                value="{{ old('name', $package->name) }}">
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>


                    {{-- DESCRIPTION --}}
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Description</label>
                        <div class="col-md-9">
                            <textarea name="description" id="description">{{ old('description', $package->description) }}</textarea>
                        </div>
                    </div>


                    {{-- SHORT DESCRIPTION --}}
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Short Description</label>
                        <div class="col-md-9">
                            <textarea name="short_description"
                                class="form-control">{{ old('short_description', $package->short_description) }}</textarea>
                        </div>
                    </div>


                    {{-- LOCATION --}}
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Location</label>
                        <div class="col-md-9">
                            <textarea name="location" class="form-control">{{ old('location', $package->location) }}</textarea>
                        </div>
                    </div>


                    {{-- PAYMENT MODE --}}
                    {{-- ✅ FIXED: old() fallback so it re-selects correctly on validation failure --}}
                    <div class="row mb-3 align-items-center">
                        <label class="col-md-3 col-form-label">Payment Mode *</label>

                        <div class="col-md-6">
                            <div class="d-flex align-items-center gap-4">

                                <div class="form-check form-check-inline">
                                    <input type="radio" name="payment_type" value="online"
                                        id="edit_payment_online"
                                        class="form-check-input payment-radio"
                                        {{ old('payment_type', $package->payment_type ?? 'offline') == 'online' ? 'checked' : '' }}>
                                    <label class="form-check-label payment-label" for="edit_payment_online">
                                        Online Payment
                                    </label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <input type="radio" name="payment_type" value="offline"
                                        id="edit_payment_offline"
                                        class="form-check-input payment-radio"
                                        {{ old('payment_type', $package->payment_type ?? 'offline') == 'offline' ? 'checked' : '' }}>
                                    <label class="form-check-label payment-label" for="edit_payment_offline">
                                        Offline Payment
                                    </label>
                                </div>

                            </div>
                            @error('payment_type')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>


                    {{-- TOUR DATES --}}
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Tour Start Date *</label>
                        <div class="col-md-3">
                            <input type="date" name="tour_start_date"
                                class="form-control @error('tour_start_date') is-invalid @enderror"
                                value="{{ old('tour_start_date', $package->tour_start_date) }}">
                            @error('tour_start_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Tour End Date *</label>
                        <div class="col-md-3">
                            <input type="date" name="tour_end_date"
                                class="form-control @error('tour_end_date') is-invalid @enderror"
                                value="{{ old('tour_end_date', $package->tour_end_date) }}">
                            @error('tour_end_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Last Booking Date *</label>
                        <div class="col-md-3">
                            <input type="date" name="last_booking_date"
                                class="form-control @error('last_booking_date') is-invalid @enderror"
                                value="{{ old('last_booking_date', $package->last_booking_date) }}">
                            @error('last_booking_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>


                    {{-- MAP --}}
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Map</label>
                        <div class="col-md-9">
                            <textarea name="map" class="form-control">{{ old('map', $package->map) }}</textarea>
                        </div>
                    </div>


                    {{-- ITINERARY --}}
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Itinerary</label>
                        <div class="col-md-9">
                            <textarea name="itinerary" id="itinerary">{{ old('itinerary', $package->itinerary) }}</textarea>
                        </div>
                    </div>


                    {{-- PRICE --}}
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Price *</label>
                        <div class="col-md-4">
                            <div class="input-group">
                                <span class="input-group-text fw-bold">$</span>
                                <input type="number" name="price" step="0.01" min="0"
                                    class="form-control @error('price') is-invalid @enderror"
                                    value="{{ old('price', $package->price) }}"
                                    placeholder="0.00">
                                <span class="input-group-text text-muted">USD</span>
                            </div>
                            @error('price')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>


                    {{-- POLICY --}}
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Policy</label>
                        <div class="col-md-9">
                            <textarea name="policy" id="policy">{{ old('policy', $package->policy) }}</textarea>
                        </div>
                    </div>


                    {{-- TERMS --}}
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Terms</label>
                        <div class="col-md-9">
                            <textarea name="terms_conditions"
                                id="terms_conditions">{{ old('terms_conditions', $package->terms_conditions) }}</textarea>
                        </div>
                    </div>


                    {{-- FEATURED --}}
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Is Featured</label>
                        <div class="col-md-3">

                            <select name="is_featured" class="form-control">

                                <option value="0" {{ old('is_featured', $package->is_featured) == 0 ? 'selected' : '' }}>No</option>
                                <option value="1" {{ old('is_featured', $package->is_featured) == 1 ? 'selected' : '' }}>Yes</option>

                            </select>

                        </div>
                    </div>


                    {{-- PHOTO --}}
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Photo</label>

                        <div class="col-md-6">

                            @if($package->photo)
                                <img src="{{ asset('storage/' . $package->photo) }}" width="120">
                            @endif

                            <input type="file" name="photo"
                                class="form-control mt-2 @error('photo') is-invalid @enderror">
                            @error('photo')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small>Only jpg, jpeg, gif and png are allowed</small>

                        </div>
                    </div>


                    {{-- BANNER --}}
                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Banner</label>

                        <div class="col-md-6">

                            @if($package->banner)
                                <img src="{{ asset('storage/' . $package->banner) }}" width="200">
                            @endif

                            <input type="file" name="banner"
                                class="form-control mt-2 @error('banner') is-invalid @enderror">
                            @error('banner')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small>Only jpg, jpeg, gif and png are allowed</small>

                        </div>
                    </div>


                    {{-- DESTINATION --}}
                    <div class="row mb-3">

                        <label class="col-md-3 col-form-label">Destination *</label>

                        <div class="col-md-6">

                            <select name="destination_id"
                                class="form-control @error('destination_id') is-invalid @enderror">

                                @foreach($destinations as $destination)

                                    <option value="{{ $destination->id }}"
                                        {{ old('destination_id', $package->destination_id) == $destination->id ? 'selected' : '' }}>
                                        {{ $destination->name }}
                                    </option>

                                @endforeach

                            </select>

                            @error('destination_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror

                        </div>

                    </div>


                    <hr>

                    <h5 class="mb-3">Existing Tour Photos</h5>

                    <div class="row mb-3">
                        <div class="col-md-9 offset-md-3">

                            @if(isset($photos))
                                @foreach($photos as $photo)

                                    <img src="{{ asset('storage/' . $photo->photo) }}" width="120" class="me-2 mb-2">

                                @endforeach
                            @endif

                        </div>
                    </div>


                    <h5 class="mb-3">Add New Tour Photos</h5>

                    <div class="row mb-3">

                        <label class="col-md-3 col-form-label">Photos</label>

                        <div class="col-md-9">

                            <table class="table table-bordered" id="photoTable">

                                <tr>
                                    <td width="90%">
                                        <input type="file" name="tour_photos[]" class="form-control">
                                    </td>

                                    <td width="10%">
                                        <button type="button" class="btn btn-danger removePhoto">X</button>
                                    </td>
                                </tr>

                            </table>

                            <button type="button" class="btn btn-info btn-sm" id="addPhoto">
                                + Add Photo
                            </button>

                        </div>

                    </div>


                    <hr>

                    <h5 class="mb-3">Existing Tour Videos</h5>

                    <div class="row mb-3">

                        <div class="col-md-9 offset-md-3">

                            @if(isset($videos))

                                @foreach($videos as $video)

                                    <div class="mb-3">
                                        {!! $video->video_iframe !!}
                                    </div>

                                @endforeach

                            @endif

                        </div>

                    </div>


                    <h5 class="mb-3">Add New Videos</h5>

                    <div class="row mb-3">

                        <label class="col-md-3 col-form-label">Videos</label>

                        <div class="col-md-9">

                            <table class="table table-bordered" id="videoTable">

                                <tr>

                                    <td width="90%">
                                        <textarea name="tour_videos[]" class="form-control"
                                            placeholder="Video iFrame Code"></textarea>
                                    </td>

                                    <td width="10%">
                                        <button type="button" class="btn btn-danger removeVideo">X</button>
                                    </td>

                                </tr>

                            </table>

                            <button type="button" class="btn btn-info btn-sm" id="addVideo">
                                + Add Video
                            </button>

                        </div>

                    </div>


                    <hr>

                    <h5 class="mb-3">SEO Information</h5>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Meta Title</label>
                        <div class="col-md-9">
                            <input type="text" name="meta_title" class="form-control"
                                value="{{ old('meta_title', $package->meta_title) }}">
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Meta Keywords</label>
                        <div class="col-md-9">
                            <textarea name="meta_keywords" class="form-control">{{ old('meta_keywords', $package->meta_keywords) }}</textarea>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-md-3 col-form-label">Meta Description</label>
                        <div class="col-md-9">
                            <textarea name="meta_description"
                                class="form-control">{{ old('meta_description', $package->meta_description) }}</textarea>
                        </div>
                    </div>


                    <button class="btn btn-primary">
                        Update
                    </button>


                </div>

            </form>

        </div>

    </div>

@endsection


@section('scripts')

    <script src="https://cdn.ckeditor.com/4.22.1/full/ckeditor.js"></script>

    <script>

        CKEDITOR.config.versionCheck = false;

        CKEDITOR.replace('description');
        CKEDITOR.replace('itinerary');
        CKEDITOR.replace('policy');
        CKEDITOR.replace('terms_conditions');


        $(document).ready(function () {

            $('#addPhoto').click(function () {

                $('#photoTable').append(`
    <tr>
    <td>
    <input type="file" name="tour_photos[]" class="form-control">
    </td>
    <td>
    <button type="button" class="btn btn-danger removePhoto">X</button>
    </td>
    </tr>
    `);

            });

            $(document).on('click', '.removePhoto', function () {
                $(this).closest('tr').remove();
            });


            $('#addVideo').click(function () {

                $('#videoTable').append(`
    <tr>
    <td>
    <textarea name="tour_videos[]" class="form-control"
    placeholder="Video iFrame Code"></textarea>
    </td>
    <td>
    <button type="button" class="btn btn-danger removeVideo">X</button>
    </td>
    </tr>
    `);

            });

            $(document).on('click', '.removeVideo', function () {
                $(this).closest('tr').remove();
            });

        });

    </script>

    <style>
    .payment-radio {
        width: 18px;
        height: 18px;
        cursor: pointer;
        border: 2px solid #000 !important;
        accent-color: #000;
    }
    .payment-radio:hover {
        border-color: #000 !important;
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
        cursor: pointer;
    }
    .payment-radio:checked {
        background-color: #000 !important;
        border-color: #000 !important;
        accent-color: #000;
    }
    .payment-radio:focus {
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
        outline: none;
    }
    .payment-label {
        cursor: pointer;
        user-select: none;
    }
    </style>

@endsection