@extends('layouts.app')
@section('title', 'Bangladesh Unbound - Create Package')
@section('page-title', 'Create New Package')@push('styles')
<!-- Quill.js CSS -->
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">

<style>
    .rich-text-editor {
        min-height: 120px;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .rich-text-editor .ql-editor {
        min-height: 100px;
    }

    .rich-text-editor .ql-toolbar {
        border-top: 1px solid #ced4da;
        border-left: 1px solid #ced4da;
        border-right: 1px solid #ced4da;
        border-bottom: none;
        border-radius: 0.375rem 0.375rem 0 0;
    }

    .rich-text-editor .ql-container {
        border-top: none;
        border-left: 1px solid #ced4da;
        border-right: 1px solid #ced4da;
        border-bottom: 1px solid #ced4da;
        border-radius: 0 0 0.375rem 0.375rem;
    }
</style>
@endpush
@section('breadcrumb')
<!-- Breadcrumb Navigation -->
<nav class="breadcrumb-container" aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('admin.dashboard') }}">
                <img src="{{ asset('backend/img/ico/ico-dashboard.svg') }}" alt="Dashboard" class="breadcrumb-icon">
                Dashboard
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ route('admin.tour-packages.index') }}">
                <img src="{{ asset('backend/img/ico/ico-packages.svg') }}" alt="Packages" class="breadcrumb-icon">
                Packages
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <img src="{{ asset('backend/img/ico/ico-packages.svg') }}" alt="Create Package" class="breadcrumb-icon">
            Create Package
        </li>
    </ol>
</nav>

@endsection
@section('content')
<div class="create-package-container">
    <form id="createPackageForm" class="package-form" method="POST" action="{{ route('admin.tour-packages.store') }}"
        enctype="multipart/form-data">
        @csrf
        @method('POST')

        <!-- Package Basic Information -->
        <div class="form-section">
            <h4 class="section-subtitle">Package Name:</h4>
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 form-group">
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name"
                            name="name" placeholder="Enter package name" value="{{ old('name') }}" required>
                        @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Price Information Card -->
            <div class="form-card">
                <h5 class="card-title">Price Information</h5>
                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3 form-group">
                            <label for="unit_price" class="form-label">Regular Price</label>
                            <input type="number" class="form-control @error('unit_price') is-invalid @enderror"
                                id="unit_price" name="unit_price" placeholder="Enter regular price" step="0.01"
                                value="{{ old('unit_price') }}" required>
                            @error('unit_price')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3 form-group">
                            <label for="discount_price" class="form-label">Discounted Price</label>
                            <input type="number" class="form-control @error('discount_price') is-invalid @enderror"
                                id="discount_price" name="discount_price" placeholder="Enter discounted price"
                                step="0.01" value="{{ old('discount_price') }}">
                            @error('discount_price')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3 form-group">
                            <label for="booking_amount" class="form-label">Booking Money</label>
                            <input type="number" class="form-control @error('booking_amount') is-invalid @enderror"
                                id="booking_amount" name="booking_amount" placeholder="Enter booking money" step="0.01"
                                value="{{ old('booking_amount') }}">
                            @error('booking_amount')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Package Settings -->
            <div class="form-card">
                <h5 class="card-title">Package Settings</h5>
                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-3 form-check">
                            <input type="hidden" name="is_show_on_website" value="0">
                            <input class="form-check-input" type="checkbox" id="is_show_on_website"
                                name="is_show_on_website" value="1" {{ old('is_show_on_website', true) ? 'checked' : ''
                                }}>
                            <label class="form-check-label" for="is_show_on_website">
                                Show this on Website?
                            </label>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="mb-3 form-check">
                            <input type="hidden" name="is_featured" value="0">
                            <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured"
                                value="1" {{ old('is_featured') ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_featured">
                                Make this Featured?
                            </label>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="mb-3 form-check">
                            <input type="hidden" name="is_popular_day_trips" value="0">
                            <input class="form-check-input" type="checkbox" id="is_popular_day_trips"
                                name="is_popular_day_trips" value="1" {{ old('is_popular_day_trips') ? 'checked' : ''
                                }}>
                            <label class="form-check-label" for="is_popular_day_trips">
                                Popular Day Trips?
                            </label>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="mb-3 form-check">
                            <input type="hidden" name="is_travellers_choice" value="0">
                            <input class="form-check-input" type="checkbox" id="is_travellers_choice"
                                name="is_travellers_choice" value="1" {{ old('is_travellers_choice') ? 'checked' : ''
                                }}>
                            <label class="form-check-label" for="is_travellers_choice">
                                Tours by Travellers Choice?
                            </label>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Activities Selection -->
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 form-group">
                        <h4 class="section-subtitle">Select Activities:</h4>
                        <div class="activities-checkboxes">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check activity-checkbox">
                                        <input class="form-check-input" type="checkbox" id="artCrafts"
                                            name="tour_activities[]" value="art-crafts" {{ in_array('art-crafts',
                                            old('tour_activities', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="artCrafts">
                                            Art & Crafts
                                        </label>
                                    </div>
                                    <div class="form-check activity-checkbox">
                                        <input class="form-check-input" type="checkbox" id="boatCruise"
                                            name="tour_activities[]" value="boat-cruise" {{ in_array('boat-cruise',
                                            old('tour_activities', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="boatCruise">
                                            Boat & Cruise
                                        </label>
                                    </div>
                                    <div class="form-check activity-checkbox">
                                        <input class="form-check-input" type="checkbox" id="culinaryFood"
                                            name="tour_activities[]" value="culinary-food" {{ in_array('culinary-food',
                                            old('tour_activities', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="culinaryFood">
                                            Culinary & Food
                                        </label>
                                    </div>
                                    <div class="form-check activity-checkbox">
                                        <input class="form-check-input" type="checkbox" id="cyclingCamping"
                                            name="tour_activities[]" value="cycling-camping" {{
                                            in_array('cycling-camping', old('tour_activities', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="cyclingCamping">
                                            Cycling & Camping
                                        </label>
                                    </div>
                                    <div class="form-check activity-checkbox">
                                        <input class="form-check-input" type="checkbox" id="folkFestivals"
                                            name="tour_activities[]" value="folk-festivals" {{
                                            in_array('folk-festivals', old('tour_activities', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="folkFestivals">
                                            Folk & Festivals
                                        </label>
                                    </div>
                                    <div class="form-check activity-checkbox">
                                        <input class="form-check-input" type="checkbox" id="historyHeritage"
                                            name="tour_activities[]" value="history-heritage" {{
                                            in_array('history-heritage', old('tour_activities', [])) ? 'checked' : ''
                                            }}>
                                        <label class="form-check-label" for="historyHeritage">
                                            History & Heritage
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check activity-checkbox">
                                        <input class="form-check-input" type="checkbox" id="natureWildlife"
                                            name="tour_activities[]" value="nature-wildlife" {{
                                            in_array('nature-wildlife', old('tour_activities', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="natureWildlife">
                                            Nature & Wildlife
                                        </label>
                                    </div>
                                    <div class="form-check activity-checkbox">
                                        <input class="form-check-input" type="checkbox" id="trailingWalking"
                                            name="tour_activities[]" value="trailing-walking" {{
                                            in_array('trailing-walking', old('tour_activities', [])) ? 'checked' : ''
                                            }}>
                                        <label class="form-check-label" for="trailingWalking">
                                            Trailing & Walking
                                        </label>
                                    </div>
                                    <div class="form-check activity-checkbox">
                                        <input class="form-check-input" type="checkbox" id="adventureSports"
                                            name="tour_activities[]" value="adventure-sports" {{
                                            in_array('adventure-sports', old('tour_activities', [])) ? 'checked' : ''
                                            }}>
                                        <label class="form-check-label" for="adventureSports">
                                            Adventure & Sports
                                        </label>
                                    </div>
                                    <div class="form-check activity-checkbox">
                                        <input class="form-check-input" type="checkbox" id="photographyTours"
                                            name="tour_activities[]" value="photography-tours" {{
                                            in_array('photography-tours', old('tour_activities', [])) ? 'checked' : ''
                                            }}>
                                        <label class="form-check-label" for="photographyTours">
                                            Photography Tours
                                        </label>
                                    </div>
                                    <div class="form-check activity-checkbox">
                                        <input class="form-check-input" type="checkbox" id="religiousSites"
                                            name="tour_activities[]" value="religious-sites" {{
                                            in_array('religious-sites', old('tour_activities', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="religiousSites">
                                            Religious Sites
                                        </label>
                                    </div>
                                    <div class="form-check activity-checkbox">
                                        <input class="form-check-input" type="checkbox" id="beachCoastal"
                                            name="tour_activities[]" value="beach-coastal" {{ in_array('beach-coastal',
                                            old('tour_activities', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="beachCoastal">
                                            Beach & Coastal
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @error('tour_activities')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Package Details Section -->
        <div class="form-section">
            <h4 class="section-subtitle">Package Details:</h4>

            <!-- Tour Date Information -->
            <div class="form-card">
                <h5 class="card-title">Tour Date</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3 form-group">
                            <label for="from_date" class="form-label">
                                <i class="bi bi-calendar text-success me-2"></i>From Date
                            </label>
                            <input type="date" class="form-control @error('from_date') is-invalid @enderror"
                                id="from_date" name="from_date" value="{{ old('from_date') }}" required>
                            @error('from_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3 form-group">
                            <label for="to_date" class="form-label">
                                <i class="bi bi-calendar-check text-success me-2"></i>To Date
                            </label>
                            <input type="date" class="form-control @error('to_date') is-invalid @enderror"
                                min="{{ now()->toDateString() }}" id="to_date" name="to_date"
                                value="{{ old('to_date') }}" required>
                            @error('to_date')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tour Information Grid -->
            <div class="tour-info-grid">
                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="tour_type_id" class="form-label">
                                <i class="bi bi-calendar-check text-success me-2"></i>Tour Type
                            </label>
                            <select class="form-control admin-select @error('tour_type_id') is-invalid @enderror"
                                id="tour_type_id" name="tour_type_id" required>
                                <option value="">Select Tours Type</option>
                                @foreach ($tourTypes as $type)
                                <option value="{{ $type->id }}" {{ old('tour_type_id')==$type->id ? 'selected' : ''
                                    }}>{{ $type->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('tour_type_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="duration" class="form-label">
                                <i class="bi bi-clock text-success me-2"></i>Duration
                            </label>
                            <input type="text" class="form-control @error('duration') is-invalid @enderror"
                                id="duration" name="duration" placeholder="e.g., 2 Days, 1 Night"
                                value="{{ old('duration') }}">
                            @error('duration')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="group_size" class="form-label">
                                <i class="bi bi-people text-success me-2"></i>Group Size
                            </label>
                            <input type="text" class="form-control @error('group_size') is-invalid @enderror"
                                id="group_size" name="group_size" placeholder="e.g., 8 Persons (Max)"
                                value="{{ old('group_size') }}">
                            @error('group_size')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="accommodation" class="form-label">
                                <i class="bi bi-building text-success me-2"></i>Accommodation
                            </label>
                            <input type="text" class="form-control @error('accommodation') is-invalid @enderror"
                                id="accommodation" name="accommodation" placeholder="e.g., 0 (Not Included)"
                                value="{{ old('accommodation') }}">
                            @error('accommodation')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="transportation" class="form-label">
                                <i class="bi bi-car-front text-success me-2"></i>Transportation
                            </label>
                            <input type="text" class="form-control @error('transportation') is-invalid @enderror"
                                id="transportation" name="transportation" placeholder="e.g., A/C Vehicle"
                                value="{{ old('transportation') }}">
                            @error('transportation')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="meals" class="form-label">
                                <i class="bi bi-cup-straw text-success me-2"></i>Meals
                            </label>
                            <input type="text" class="form-control @error('meals') is-invalid @enderror" id="meals"
                                name="meals" placeholder="e.g., 1 (Lunch/person)" value="{{ old('meals') }}">
                            @error('meals')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="fitness_level" class="form-label">
                                <i class="bi bi-activity text-success me-2"></i>Fitness Level
                            </label>
                            <input type="text" class="form-control @error('fitness_level') is-invalid @enderror"
                                id="fitness_level" name="fitness_level" placeholder="e.g., Moderate"
                                value="{{ old('fitness_level') }}">
                            @error('fitness_level')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="minimum_age" class="form-label">
                                <i class="bi bi-person text-success me-2"></i>Minimum Age
                            </label>
                            <input type="number" min="0" step="0.2"
                                class="form-control @error('minimum_age') is-invalid @enderror" id="minimum_age"
                                name="minimum_age" placeholder="e.g., 6" value="{{ old('minimum_age') }}">
                            @error('minimum_age')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="language" class="form-label">
                                <i class="bi bi-translate text-success me-2"></i>Language
                            </label>
                            <input type="text" class="form-control @error('language') is-invalid @enderror"
                                id="language" name="language" placeholder="e.g., English"
                                value="{{ old('language', 'English') }}">
                            @error('language')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="best_season" class="form-label">
                                <i class="bi bi-sun text-success me-2"></i>Best Season
                            </label>
                            <input type="text" class="form-control @error('best_season') is-invalid @enderror"
                                id="best_season" name="best_season" placeholder="e.g., All Year Round"
                                value="{{ old('best_season') }}">
                            @error('best_season')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="guiding_method" class="form-label">
                                <i class="bi bi-person-check text-success me-2"></i>Guiding Method
                            </label>
                            <input type="text" class="form-control @error('guiding_method') is-invalid @enderror"
                                id="guiding_method" name="guiding_method" placeholder="e.g., Full Time"
                                value="{{ old('guiding_method') }}">
                            @error('guiding_method')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="location" class="form-label">
                                <i class="bi bi-geo-alt text-success me-2"></i>Location
                            </label>
                            <input type="text" class="form-control @error('location') is-invalid @enderror"
                                id="location" name="location" placeholder="e.g., New & Old Dhaka"
                                value="{{ old('location') }}">
                            @error('location')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="travel_point_id" class="form-label">
                                <i class="bi bi-geo-alt-fill text-success me-2"></i>Select Destinations
                            </label>
                            <select class="form-control admin-select @error('travel_point_id') is-invalid @enderror"
                                id="travel_point_id" name="travel_point_id" required>
                                <option value="">Select Destination</option>
                                @foreach ($travelPoints as $point)
                                <option value="{{ $point->id }}" {{ old('travel_point_id')==$point->id ? 'selected' : ''
                                    }}>
                                    {{ $point->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('travel_point_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="max_altitude" class="form-label">
                                <i class="bi bi-triangle text-success me-2"></i>Max Altitude
                            </label>
                            <input type="text" class="form-control @error('max_altitude') is-invalid @enderror"
                                id="max_altitude" name="max_altitude" placeholder="e.g., Not Applicable"
                                value="{{ old('max_altitude') }}">
                            @error('max_altitude')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="arrival_on" class="form-label">
                                <i class="bi bi-airplane-engines text-success me-2"></i>Arrival On
                            </label>
                            <input type="text" class="form-control @error('arrival_on') is-invalid @enderror"
                                id="arrival_on" name="arrival_on" placeholder="e.g., Dhaka, Bangladesh"
                                value="{{ old('arrival_on') }}">
                            @error('arrival_on')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mb-3 form-group">
                            <label for="departure_from" class="form-label">
                                <i class="bi bi-airplane text-success me-2"></i>Departure From
                            </label>
                            <input type="text" class="form-control @error('departure_from') is-invalid @enderror"
                                id="departure_from" name="departure_from" placeholder="e.g., Dhaka, Bangladesh"
                                value="{{ old('departure_from') }}">
                            @error('departure_from')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!-- Subtitle -->
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 form-group">
                        <label for="sub_title" class="form-label">Subtitle</label>
                        <input type="text" class="form-control @error('sub_title') is-invalid @enderror" id="sub_title"
                            name="sub_title" placeholder="Enter package subtitle" value="{{ old('sub_title') }}">
                        @error('sub_title')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 form-group">
                        <label for="packageIntro" class="form-label @error('intro') is-invalid @enderror">Intro</label>
                        <div id="packageIntroEditor" class="rich-text-editor"></div>
                        <textarea class="form-control d-none" id="packageIntro" name="intro" rows="4"
                            placeholder="Enter tour introduction"></textarea>
                        @error('intro')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 form-group">
                        <label for="tourHighlights"
                            class="form-label @error('tour_highlight') is-invalid @enderror">Tour Highlights</label>
                        <div id="tourHighlightsEditor" class="rich-text-editor"></div>
                        <textarea class="form-control d-none" id="tourHighlights" name="tour_highlight" rows="4"
                            placeholder="Enter tour highlights"></textarea>
                        @error('tour_highlight')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 form-group">
                        <label for="tourAttractions"
                            class="form-label @error('tour_attraction') is-invalid @enderror">Tour Attractions</label>
                        <div id="tourAttractionsEditor" class="rich-text-editor"></div>
                        <textarea class="form-control d-none" id="tourAttractions" name="tour_attraction" rows="4"
                            placeholder="Enter tour attractions"></textarea>
                        @error('tour_attraction')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Dynamic Itinerary Section -->
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 form-group">
                        <label class="form-label">Itinerary</label>

                        <!-- Itinerary Days Container -->
                        <div class="itinerary-container" id="itineraryContainer">
                            @php
                            $itineraryDays = old('itinerary_days', [1 => '']);
                            $dayCount = count($itineraryDays);
                            @endphp

                            @foreach ($itineraryDays as $day => $content)
                            <div class="itinerary-day" data-day="{{ $day }}">
                                <div class="itinerary-day-header">
                                    <h6 class="itinerary-day-title">Day {{ $day }}</h6>
                                    @if ($day > 1)
                                    <button type="button" class="btn btn-sm btn-outline-danger remove-itinerary-day"
                                        onclick="removeItineraryDay({{ $day }})">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                    @endif
                                </div>
                                <div id="itineraryDay{{ $day }}Editor" class="rich-text-editor"></div>
                                <textarea
                                    class="form-control d-none @error('itinerary_days.' . $day) is-invalid @enderror"
                                    name="itinerary_days[{{ $day }}]" rows="3"
                                    placeholder="Enter Day {{ $day }} itinerary details">{{ $content }}</textarea>
                                @error('itinerary_days.' . $day)
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            @endforeach
                        </div>

                        <!-- Add Day Button -->
                        <button type="button" class="mt-3 btn btn-outline-primary" id="addItineraryDay">
                            <i class="bi bi-plus-circle"></i> Add Day
                        </button>
                    </div>
                </div>
            </div>

            <!-- Tour Map Image Upload -->
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 form-group">
                        <label for="map_image" class="form-label">Tour Map Image</label>
                        <input type="file" class="form-control @error('map_image') is-invalid @enderror" id="map_image"
                            name="map_image" accept="image/*">
                        <small class="form-text text-muted">Upload a single tour map image. Supported formats: JPG,
                            PNG, GIF</small>
                        @error('map_image')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror

                        <!-- Tour Map Image Preview -->
                        <div class="mt-3 tour-map-preview" id="tourMapPreview" style="display: none;">
                            <div class="tour-map-preview-item">
                                <img id="tourMapPreviewImg" src="" alt="Tour Map Preview"
                                    style="max-width: 300px; max-height: 200px; border-radius: 8px;">
                                <button type="button" class="mt-2 btn btn-sm btn-danger"
                                    onclick="removeTourMapPreview()">
                                    <i class="bi bi-trash"></i> Remove
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 form-group">
                        <label for="trip_notes" class="form-label @error('trip_notes') is-invalid @enderror">Trip
                            Notes</label>
                        <div id="tripNotesEditor" class="rich-text-editor"></div>
                        <textarea class="form-control d-none" id="trip_notes" name="trip_notes" rows="4"
                            placeholder="Enter important trip notes"></textarea>
                        @error('trip_notes')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 form-group">
                        <label for="faq" class="form-label @error('faq') is-invalid @enderror">FAQ</label>
                        <div id="faqEditor" class="rich-text-editor"></div>
                        <textarea class="form-control d-none" id="faq" name="faq" rows="6"
                            placeholder="Enter frequently asked questions and answers"></textarea>
                        @error('faq')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3 form-group">
                        <label for="reviews" class="form-label @error('reviews') is-invalid @enderror">Reviews</label>
                        <div id="reviewsEditor" class="rich-text-editor"></div>
                        <textarea class="form-control d-none" id="reviews" name="reviews" rows="6"
                            placeholder="Enter customer reviews"></textarea>
                        @error('reviews')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

        </div>

        <!-- Pick up & Drop off Location Section -->
        <div class="form-section">
            <h4 class="section-subtitle">Pick up & Drop off Location:</h4>

            <div class="form-card">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3 form-group">
                            <label for="pickup_location" class="form-label">
                                <i class="bi bi-geo-alt text-success me-2"></i>Pick up Location
                            </label>
                            <input type="text" class="form-control @error('pickup_location') is-invalid @enderror"
                                id="pickup_location" name="pickup_location" placeholder="Enter pick up location"
                                value="{{ old('pickup_location') }}">
                            @error('pickup_location')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6 mt-3 mt-md-0">
                        <div class="mb-3 form-group">
                            <label for="dropoff_location" class="form-label">
                                <i class="bi bi-geo-alt text-danger me-2"></i>Drop off Location
                            </label>
                            <input type="text" class="form-control @error('dropoff_location') is-invalid @enderror"
                                id="dropoff_location" name="dropoff_location" placeholder="Enter drop off location"
                                value="{{ old('dropoff_location') }}">
                            @error('dropoff_location')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- //features image --}}
        <div class="row">
            <div class="col-md-12">
                <div class="mb-3 form-group">
                    <label for="features_image" class="form-label">Features Image</label>
                    <input type="file" class="form-control @error('features_image') is-invalid @enderror"
                        id="features_image" name="features_image" accept="image/*">
                    <small class="form-text text-muted">Upload a single features image. Supported formats: JPG,
                        PNG, GIF</small>
                    @error('features_image')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>


        <!-- Media Section -->
        <div class="form-section">
            <h4 class="section-subtitle">Media & Gallery:</h4>

            <!-- Featured Image Upload -->
            <div class="form-card">
                <h5 class="card-title">Featured Image</h5>
                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-3 form-group">
                            <label for="feature_image" class="form-label">Upload Featured Image</label>
                            <input type="file" class="form-control @error('feature_image') is-invalid @enderror"
                                id="feature_image" name="feature_image" accept="image/*">
                            <small class="form-text text-muted">Upload a single featured image. Supported formats: JPG,
                                PNG, GIF</small>
                            @error('feature_image')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror

                            <!-- Featured Image Preview -->
                            <div class="mt-3 featured-image-preview" id="featuredImagePreview"
                                style="{{ old('feature_image_preview') || (isset($tourPackage) && $tourPackage->feature_image) ? '' : 'display: none;' }}">
                                <div class="featured-image-preview-item">
                                    <img id="featuredImagePreviewImg"
                                        src="{{ old('feature_image_preview') ?? (isset($tourPackage) ? asset('storage/' . $tourPackage->feature_image) : '') }}"
                                        alt="Featured Image Preview"
                                        style="max-width: 300px; max-height: 200px; border-radius: 8px;">
                                    <button type="button" class="mt-2 btn btn-sm btn-danger"
                                        onclick="removeFeaturedImagePreview()">
                                        <i class="bi bi-trash"></i> Remove
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Thumbnail Image Upload -->
            <div class="form-card">
                <h5 class="card-title">Thumbnail Image</h5>
                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-3 form-group">
                            <label for="thumbnail" class="form-label">Upload Thumbnail Image</label>
                            <input type="file" class="form-control @error('thumbnail') is-invalid @enderror"
                                id="thumbnail" name="thumbnail" accept="image/*">
                            <small class="form-text text-muted">Upload a single thumbnail image. Supported formats:
                                JPG, PNG, GIF</small>
                            @error('thumbnail')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror

                            <!-- Thumbnail Image Preview -->
                            <div class="mt-3 thumbnail-image-preview" id="thumbnailImagePreview"
                                style="{{ old('thumbnail_preview') || (isset($tourPackage) && $tourPackage->thumbnail) ? '' : 'display: none;' }}">
                                <div class="thumbnail-image-preview-item">
                                    <img id="thumbnailImagePreviewImg"
                                        src="{{ old('thumbnail_preview') ?? (isset($tourPackage) ? asset('storage/' . $tourPackage->thumbnail) : '') }}"
                                        alt="Thumbnail Image Preview"
                                        style="max-width: 300px; max-height: 200px; border-radius: 8px;">
                                    <button type="button" class="mt-2 btn btn-sm btn-danger"
                                        onclick="removeThumbnailImagePreview()">
                                        <i class="bi bi-trash"></i> Remove
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Gallery Images Upload -->
            <div class="form-card">
                <h5 class="card-title">Gallery Images</h5>
                <div class="row">
                    <div class="col-md-12">
                        <div class="mb-3 form-group">
                            <label for="gallery_images" class="form-label">Upload Gallery Images</label>
                            <input type="file"
                                class="form-control @error('gallery_images') is-invalid @enderror @error('gallery_images.*') is-invalid @enderror"
                                id="gallery_images" name="gallery_images[]" multiple accept="image/*">
                            <small class="form-text text-muted">You can select multiple images. Supported formats: JPG,
                                PNG, GIF. Maximum 10 images.</small>
                            @error('gallery_images')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            @error('gallery_images.*')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Image Preview Area -->
                        <div class="image-preview-container" id="imagePreviewContainer">
                            @if (old('gallery_previews') && is_array(old('gallery_previews')))
                            @foreach (old('gallery_previews') as $index => $preview)
                            <div class="image-preview-item">
                                <img src="{{ $preview }}" alt="Gallery Preview">
                                <button type="button" class="btn btn-danger btn-sm"
                                    onclick="removeGalleryPreview({{ $index }})">
                                    <i class="bi bi-x"></i>
                                </button>
                                <input type="hidden" name="gallery_previews[]" value="{{ $preview }}">
                            </div>
                            @endforeach
                            @elseif(isset($tourPackage) && $tourPackage->gallery_images)
                            @foreach (json_decode($tourPackage->gallery_images) as $index => $image)
                            <div class="image-preview-item">
                                <img src="{{ asset('storage/' . $image) }}" alt="Gallery Image">
                                <button type="button" class="btn btn-danger btn-sm"
                                    onclick="removeExistingImage({{ $index }})">
                                    <i class="bi bi-x"></i>
                                </button>
                                <input type="hidden" name="existing_gallery[]" value="{{ $image }}">
                            </div>
                            @endforeach
                            @else
                            <div class="image-preview-placeholder">
                                <i class="bi bi-images" style="font-size: 3rem;"></i>
                                <p>Selected images will appear here</p>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Video Section -->
            <div class="form-card">
                <h5 class="card-title">Video</h5>
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3 form-group">
                            <label for="video" class="form-label">Upload Video File</label>
                            <input type="file" class="form-control @error('video') is-invalid @enderror" id="video"
                                name="video" accept="video/*">
                            <small class="form-text text-muted">Supported formats: MP4, AVI, MOV. Maximum size:
                                50MB</small>
                            @error('video')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror

                            @if (isset($tourPackage) && $tourPackage->video)
                            <div class="mt-2">
                                <small>Current video: {{ basename($tourPackage->video) }}</small>
                                <button type="button" class="btn btn-sm btn-outline-danger ms-2"
                                    onclick="removeVideoFile()">
                                    <i class="bi bi-trash"></i> Remove
                                </button>
                                <input type="hidden" name="remove_video" id="removeVideo" value="0">
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3 form-group">
                            <label for="video_url" class="form-label">Or Video URL</label>
                            <input type="url" class="form-control @error('video_url') is-invalid @enderror"
                                id="video_url" name="video_url" placeholder="Enter YouTube video URL"
                                value="{{ old('video_url', isset($tourPackage) ? $tourPackage->video_url : '') }}">
                            <small class="form-text text-muted">Alternative to file upload</small>
                            @error('video_url')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="container my-5">
            <!-- Feedback Logs Section -->
            <div class="form-section">
                <h4 class="section-subtitle">Add Feedback Logs:</h4>

                <!-- Activities Days Container -->
                <div class="activities-logs-container" id="activitiesLogsContainer">
                    @php
                    // Get existing days from old input or initialize with day 1
                    $days = old('feedback_days', [1 => ['activities' => []]]);
                    @endphp

                    @foreach ($days as $dayNumber => $dayData)
                    <div class="activities-log-day" data-day="{{ $dayNumber }}">
                        <div class="activities-day-header">
                            <h5 class="activities-day-title">Day {{ $dayNumber }}</h5>
                            @if ($dayNumber > 1)
                            <button type="button" class="btn btn-sm btn-outline-danger remove-activities-day"
                                onclick="removeActivitiesDay({{ $dayNumber }})">
                                <i class="bi bi-trash"></i>
                            </button>
                            @endif
                        </div>

                        <div class="activities-list">
                            @foreach ($dayData['activities'] as $activityIndex => $activity)
                            <div class="activity-item">
                                <div class="activity-item-header">
                                    <h6 class="activity-item-title">Feedback #{{ $activityIndex + 1 }}
                                    </h6>
                                    <button type="button" class="btn btn-sm btn-outline-danger remove-activity-item"
                                        onclick="removeActivityItem({{ $dayNumber }}, {{ $activityIndex }})">
                                        <i class="bi bi-x"></i>
                                    </button>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3 form-group">
                                            <label for="feedback_title_{{ $dayNumber }}_{{ $activityIndex }}"
                                                class="form-label">Title</label>
                                            <input type="text"
                                                class="form-control @error('feedback_days.' . $dayNumber . '.activities.' . $activityIndex . '.title') is-invalid @enderror"
                                                id="feedback_title_{{ $dayNumber }}_{{ $activityIndex }}"
                                                name="feedback_days[{{ $dayNumber }}][activities][{{ $activityIndex }}][title]"
                                                value="{{ old('feedback_days.' . $dayNumber . '.activities.' . $activityIndex . '.title', $activity['title'] ?? '') }}"
                                                placeholder="Enter feedback title">
                                            @error('feedback_days.' . $dayNumber . '.activities.' .
                                            $activityIndex . '.title')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3 form-group">
                                            <label for="feedback_time_{{ $dayNumber }}_{{ $activityIndex }}"
                                                class="form-label">Time</label>
                                            <input type="time"
                                                class="form-control @error('feedback_days.' . $dayNumber . '.activities.' . $activityIndex . '.time') is-invalid @enderror"
                                                id="feedback_time_{{ $dayNumber }}_{{ $activityIndex }}"
                                                name="feedback_days[{{ $dayNumber }}][activities][{{ $activityIndex }}][time]"
                                                value="{{ old('feedback_days.' . $dayNumber . '.activities.' . $activityIndex . '.time', $activity['time'] ?? '') }}">
                                            @error('feedback_days.' . $dayNumber . '.activities.' .
                                            $activityIndex . '.time')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3 form-group">
                                    <label for="feedback_description_{{ $dayNumber }}_{{ $activityIndex }}"
                                        class="form-label">Description</label>
                                    <textarea
                                        class="form-control @error('feedback_days.' . $dayNumber . '.activities.' . $activityIndex . '.description') is-invalid @enderror"
                                        id="feedback_description_{{ $dayNumber }}_{{ $activityIndex }}"
                                        name="feedback_days[{{ $dayNumber }}][activities][{{ $activityIndex }}][description]"
                                        rows="3"
                                        placeholder="Enter feedback description">{{ old('feedback_days.' . $dayNumber . '.activities.' . $activityIndex . '.description', $activity['description'] ?? '') }}</textarea>
                                    @error('feedback_days.' . $dayNumber . '.activities.' . $activityIndex .
                                    '.description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox"
                                        id="feedback_important_{{ $dayNumber }}_{{ $activityIndex }}"
                                        name="feedback_days[{{ $dayNumber }}][activities][{{ $activityIndex }}][important]"
                                        value="1" {{ old('feedback_days.' . $dayNumber . '.activities.' . $activityIndex
                                        . '.important' , $activity['important'] ?? 0) ? 'checked' : '' }}>
                                    <label class="form-check-label"
                                        for="feedback_important_{{ $dayNumber }}_{{ $activityIndex }}">
                                        Mark as important
                                    </label>
                                </div>
                            </div>
                            @endforeach

                        </div>

                        <button type="button" class="mt-2 btn btn-outline-secondary btn-sm add-activity-item"
                            data-day="{{ $dayNumber }}">
                            <i class="bi bi-plus-circle"></i> Add Feedback
                        </button>
                    </div>
                    @endforeach
                </div>

                <!-- Add Day Button -->
                <button type="button" class="mt-3 btn btn-outline-primary" id="addActivitiesDay">
                    <i class="bi bi-plus-circle"></i> Add Day
                </button>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="form-section">
            <div class="d-flex justify-content-center">
                <button type="submit" class="btn btn-create-package" id="submitButton">
                    Create Package
                </button>
            </div>
        </div>
    </form>
</div>

@endsection

@push('scripts')
@endpush