@extends('layouts/layoutMaster')

@section('title', 'eCommerce Product Add - Apps')

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/quill/typography.scss',
'resources/assets/vendor/libs/quill/katex.scss',
'resources/assets/vendor/libs/quill/editor.scss',
'resources/assets/vendor/libs/select2/select2.scss',
'resources/assets/vendor/libs/dropzone/dropzone.scss',
'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
'resources/assets/vendor/libs/tagify/tagify.scss',
'resources/assets/vendor/libs/bs-stepper/bs-stepper.scss'
])
@endsection

@section('vendor-script')
@vite([
'resources/assets/vendor/libs/select2/select2.js',
'resources/assets/vendor/libs/tagify/tagify.js',
'resources/assets/vendor/libs/dropzone/dropzone.js',
'resources/assets/vendor/libs/jquery-repeater/jquery-repeater.js',
'resources/assets/vendor/libs/flatpickr/flatpickr.js'
])
@endsection

@section('page-script')
@vite([
'resources/assets/js/hybrid-package-add.js'
])
@endsection

@section('content')
<div class="app-ecommerce">

    <!-- Add Product -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">

        <div class="d-flex flex-column justify-content-center">
            <h4 class="mb-1">Add Hybrid Package</h4>
            <p class="mb-0">Fill in the details below to add a new transfer</p>
        </div>
    </div>


    <div class="row">
        <!-- First column-->
        <div class="col-12 col-lg-12">
            @include('content.hybrid.package.alerts')
            @include('content.hybrid.package.stepper', ['currentStep' => 1,'packageId'=>0])

            <form action="{{ isset($package) ? route('hybrid-package-details-update', $package->id) : route('hybrid-package-details-store') }}" method="POST" class="needs-validation" novalidate>
                @csrf
                @isset($package)
                @method('PUT')
                <input type="hidden" value="{{ $package->id }}" name="package_id">
                @endisset

                <div class="card mb-6">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Package Details</h5>
                    </div>
                    <div class="card-body">

                        <div class="row">
                            <div class="mb-6 col-12">
                                <label class="form-label" for="package-title">Package Title *</label>
                                <input type="text" id="package-title" name="package_title" class="form-control"  value="{{ old('package_title', $package->package_title ?? '') }}" required>
                            </div>
                            <div class="mb-6 col-12">
                                <label class="form-label" for="package-title">Package Short Description *</label>
                                <textarea id="package-short-description" name="package_short_description" class="form-control" required>{{ old('package_short_description', $package->short_description ?? '') }}</textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-6 col-12">
                                <label class="form-label" for="package-title">Package Description *</label>
                                <textarea id="package-description" name="package_description" class="form-control" required>{{ old('package_description', $package->description ?? '') }}</textarea>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Package Default Language -->
                            <div class="mb-6 col-4">
                                <label class="form-label" for="package-language">Package Default Language *</label>
                                <select id="package-language" name="package_default_language" class="form-select" required>
                                    <option value="EN" {{ old('package_default_language', $package->package_default_language ?? 'EN') == 'EN' ? 'selected' : '' }}>English</option>
                                    <option value="AR" {{ old('package_default_language', $package->package_default_language ?? 'EN') == 'AR' ? 'selected' : '' }}>Arabic</option>
                                </select>
                            </div>

                            <!-- Package URL Extension -->
                            <div class="mb-6 col-4">
                                <label class="form-label" for="package-url">Package URL Extension *</label>
                                <input type="text" id="package-url" name="package_url_extension" class="form-control"
                                       value="{{ old('package_url', $package->package_url ?? '') }}" required>
                            </div>
                            <!-- Package Booking Type -->
                            <div class="mb-6 col-4">
                                <label class="form-label" for="package-booking-type">Package Booking Type *</label>
                                <select id="package-booking-type" name="package_booking_type" class="form-select" required>
                                    <option value="">Select Booking Type</option>
                                    <option value="FIT_Dynamic" {{ old('package_booking_type', $package->package_booking_type ?? '') == 'FIT_Dynamic' ? 'selected' : '' }}>FIT Dynamic</option>
                                    <option value="Fixed_Departure" {{ old('package_booking_type', $package->package_booking_type ?? '') == 'Fixed_Departure' ? 'selected' : '' }}>Fixed Departure</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-6 col-4">
                                <label class="form-label" for="departing-countries">Departing Countries *</label>
                                <select id="departing-countries" name="departing_countries[]" class="select2 form-select" multiple>
                                    @foreach($countries as $country)
                                    <option value="{{ $country->alpha2 }}" 
                                            {{ in_array($country->alpha2, old('departing_countries', $package->departing_countries ?? [])) ? 'selected' : '' }}>
                                        {{ $country->langEN }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-6 col-4">
                                <label class="form-label" for="cities-autosearch">Search Departing Cities *</label>
                                <select id="cities-autosearch" name="departing_cities[]" class="select2 form-select" multiple data-selected="{{ json_encode(isset($package->departing_cities) ?array_unique($package->departing_cities): []) }}"></select>
                            </div>
                            <div class="mb-6 col-4">
                                <label class="form-label" for="package-booking-type">Flight Search Type *</label>
                                <select id="flight_search_type" name="flight_search_type" class="form-select" required>
                                    <option value="">Select Search Type</option>
                                    <option value="Oneway" {{ old('flight_search_type', $package->flight_search_type ?? '') == 'Oneway' ? 'selected' : '' }}>Oneway</option>
                                    <option value="Roundtrip" {{ old('flight_search_type', $package->flight_search_type ?? '') == 'Roundtrip' ? 'selected' : '' }}>Roundtrip</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-4 col-4">
                                <label class="form-label" for="search-keywords">Search Keywords</label>
                                <select id="search-keywords" name="search_keywords[]" class="select2 form-select" multiple>
                                    <option value="Flight" {{ in_array("Flight", old('search_keywords', $package->search_keywords ?? [])) ? 'selected' : '' }}>Flight</option>
                                    <option value="Hotel" {{ in_array("Hotel", old('search_keywords', $package->search_keywords ?? [])) ? 'selected' : '' }}>Hotel</option>
                                    <option value="Meals" {{ in_array("Meals", old('search_keywords', $package->search_keywords ?? [])) ? 'selected' : '' }}>Meals</option>
                                    <option value="Guidance" {{ in_array("Guidance", old('search_keywords', $package->search_keywords ?? [])) ? 'selected' : '' }}>Guidance</option>
                                    <option value="Transfers" {{ in_array("Transfers", old('search_keywords', $package->search_keywords ?? [])) ? 'selected' : '' }}>Transfers</option>
                                </select>
                            </div>

                            <div class="mb-4 col-4">
                                <label class="form-label" for="package-tags">Package Tags</label>
                                <input id="TagifyCustomInlineSuggestion" name="package_tags" class="form-control" placeholder="select tags" data-selected="{{ json_encode($package->package_tags ?? []) }}">
<!--                                <select id="package-tags" name="package_tags[]" class="select2 form-select" multiple>
                                    <option value="Personal Expenses">Umrah</option>
                                    <option value="Tips">Mecca</option>
                                    <option value="Insurance">Medina</option>
                                    <option value="Laundry">Laundry</option>
                                </select>-->
                            </div>
                            <div class="mb-4 col-4">
                                <label class="form-label" for="package-inclusion-tags">Package Inclusion Tags</label>
                                <input id="TagifyCustomListSuggestion" name="package_inclusion_tags" class="form-control" placeholder="select tags" data-selected="{{ json_encode($package->package_inclusion_tags ?? []) }}">

                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-4 col-4">
                                <label class="form-label" for="highlights">Highlights</label>
                                <select id="highlights" name="highlights[]" class="select2 form-select" multiple>
                                    <option value="Guided Tours" {{ in_array("Guided Tours", old('highlights', $package->highlights ?? [])) ? 'selected' : '' }}>Guided Tours</option>
                                    <option value="Holy Sites" {{ in_array("Holy Sites", old('highlights', $package->highlights ?? [])) ? 'selected' : '' }}>Holy Sites</option>
                                    <option value="5-Star Hotels" {{ in_array("5-Star Hotels", old('highlights', $package->highlights ?? [])) ? 'selected' : '' }}>5-Star Hotels</option>
                                </select>
                            </div>

                            <div class="mb-4 col-4">
                                <label class="form-label" for="package-type">Package Type</label>
                                <select id="package-type" name="package_type" class="select2 form-select">
                                    <option value="">Select Package Type</option>
                                    @foreach($packageTypes as $packageType)
                                    <option value="{{$packageType->id}}" {{ old('package_type', $package->package_type ?? '') == $packageType->id ? 'selected' : '' }}>{{$packageType->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-4 col-4">
                                <label class="form-label" for="package-category">Package Category</label>
                                <select id="package-category" name="package_category" class="select2 form-select">
                                    <option value="">Select Package Category</option>
                                    @foreach($packageCategories as $packageCategory)
                                    <option value="{{$packageCategory->id}}" {{ old('package_category', $package->package_category ?? '') == $packageCategory->id ? 'selected' : '' }}>{{$packageCategory->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-6 col-4">
                                <label class="form-label" for="countries-included">Countries Included *</label>
                                <select id="countries-included" name="countries_included[]" class="select2 form-select" multiple>
                                    @foreach($countries as $country)
                                    <option value="{{$country->alpha2}}" {{ in_array($country->alpha2, old('included_countries', $package->included_countries ?? [])) ? 'selected' : '' }}>{{$country->langEN}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-6 col-4">
                                <label class="form-label" for="cities-autosearch2">Cities Included *</label>
                                <select id="cities-autosearch2" name="cities_included[]" class="select2 form-select" multiple data-selected="{{ json_encode($package->included_cities ?? []) }}"></select>

                            </div>
                            <div class="mb-4 col-4">
                                <label class="form-label" for="package-pax-types">Package Pax Types Included</label>
                                <select id="package-pax-types" name="package_pax_types[]" class="select2 form-select" multiple>
                                    <option value="ADT" {{ in_array("ADT", old('package_pax_type_included', $package->package_pax_type_included ?? [])) ? 'selected' : '' }}>Adult</option>
                                    <option value="CHD" {{ in_array("CHD", old('package_pax_type_included', $package->package_pax_type_included ?? [])) ? 'selected' : '' }}>Child</option>
                                    <option value="INF" {{ in_array("INF", old('package_pax_type_included', $package->package_pax_type_included ?? [])) ? 'selected' : '' }}>Infant</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-4 col-6">
                                <label class="form-label" for="target-audience">Target Audience</label>
                                <select id="target-audience" name="target_audience[]" class="select2 form-select" multiple>
                                    <option value="1" {{ in_array("1", old('package_target_audience', $package->package_target_audience ?? [])) ? 'selected' : '' }}>Beach Lovers</option>
                                    <option value="2" {{ in_array("2", old('package_target_audience', $package->package_target_audience ?? [])) ? 'selected' : '' }}>Luxury Seekers</option>
                                    <option value="3" {{ in_array("3", old('package_target_audience', $package->package_target_audience ?? [])) ? 'selected' : '' }}>Adventure Enthusiasts</option>
                                    <option value="4" {{ in_array("4", old('package_target_audience', $package->package_target_audience ?? [])) ? 'selected' : '' }}>Solo Travelers</option>
                                    <option value="5" {{ in_array("5", old('package_target_audience', $package->package_target_audience ?? [])) ? 'selected' : '' }}>Families With Children</option>
                                    <option value="6" {{ in_array("6", old('package_target_audience', $package->package_target_audience ?? [])) ? 'selected' : '' }}>Couples and Honeymooners</option>
                                    <option value="7" {{ in_array("7", old('package_target_audience', $package->package_target_audience ?? [])) ? 'selected' : '' }}>Target Audience</option>
                                </select>
                            </div>
                            <div class="mb-6 col-6">
                                <label class="form-label" for="hotel-category">Hotel Star Category Included *</label>
                                <select id="hotel-category" name="hotel_star_rating" class="form-select" required>
                                    <option value="">Select Hotel Stars</option>
                                    <option value="1-Star" {{ old('hotel_star_rating', $package->hotel_star_rating ?? '') == "1-Star" ? 'selected' : '' }}>1 Star</option>
                                    <option value="2-Star" {{ old('hotel_star_rating', $package->hotel_star_rating ?? '') == "2-Star" ? 'selected' : '' }}>2 Star</option>
                                    <option value="3-Star" {{ old('hotel_star_rating', $package->hotel_star_rating ?? '') == "3-Star" ? 'selected' : '' }}>3 Star</option>
                                    <option value="4-Star" {{ old('hotel_star_rating', $package->hotel_star_rating ?? '') == "4-Star" ? 'selected' : '' }}>4 Star</option>
                                    <option value="5-Star" {{ old('hotel_star_rating', $package->hotel_star_rating ?? '') == "5-Star" ? 'selected' : '' }}>5 Star</option>
                                </select>
                            </div>

                        </div>
                        <div class="row">
                            <div class="mb-6 col-6">
                                <label class="form-label" for="sequence">Sequence *</label>
                                <input type="number" id="sequence" value="1" name="sequence" class="form-control" required>
                            </div>
                            <div class="mt-4 mb-6 col-3">
                                <div class="form-check form-check-inline mt-4">
                                    <input class="form-check-input" type="checkbox" id="popular-package" name="popular_package"  {{ old('is_popular_package', $package->is_popular_package ?? '') == "1" ? 'checked' : '' }}/>
                                    <label class="form-check-label" for="popular-package">Popular Package</label>
                                </div>
                            </div>
                            <div class="mt-4 mb-6 col-3">
                                <div class="form-check form-check-inline mt-4">
                                    <input class="form-check-input" type="checkbox" id="visa-included" name="visa_included" {{ old('is_visa_included', $package->is_visa_included ?? '') == "1" ? 'checked' : '' }}/>
                                    <label class="form-check-label" for="visa-included">Visa Included</label>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Sale Period Repeater -->
                            <div class="mb-6 col-6">
                                <div class="form-repeater">
                                    <div data-repeater-list="sales">
                                        @if(isset($saleDates) && count($saleDates) > 0)
                                        @foreach($saleDates as $saleDate)
                                        <div data-repeater-item>
                                            <div class="row">
                                                <div class="mb-6 col-10">
                                                    <label for="flatpickr-range" class="form-label">Sale Period *</label>
                                                    <input type="text" name="sale_period" class="form-control flatpickr-range" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range" value="{{ $saleDate }}" />
                                                </div>
                                                <div class="mt-5 mb-6 col-2">
                                                    <button type="button" class="btn btn-danger" data-repeater-delete>-</button>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                        @else
                                        <div data-repeater-item>
                                            <div class="row">
                                                <div class="mb-6 col-10">
                                                    <label for="flatpickr-range" class="form-label">Sale Period *</label>
                                                    <input type="text" name="sale_period" class="form-control flatpickr-range" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range"/>
                                                </div>
                                                <div class="mt-5 mb-6 col-2">
                                                    <button type="button" class="btn btn-danger" data-repeater-delete>-</button>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                    <button type="button" class="btn btn-primary" data-repeater-create><i class='ti ti-plus ti-xs me-2'></i> Add More</button>
                                </div>
                            </div>

                            <!-- Travel Period Repeater -->
                            <div class="mb-6 col-6">
                                <div class="form-repeater">
                                    <div data-repeater-list="travel">
                                        @if(isset($travelDates) && count($travelDates) > 0)
                                        @foreach($travelDates as $travelDate)
                                        <div data-repeater-item>
                                            <div class="row">
                                                <div class="mb-6 col-10">
                                                    <label class="form-label" for="travel-period">Travel Period *</label>
                                                    <input type="text" id="travel-period" name="travel_period" class="form-control flatpickr-range1" placeholder="YYYY-MM-DD to YYYY-MM-DD" value="{{ $travelDate }}" required />
                                                </div>
                                                <div class="mt-5 mb-6 col-2">
                                                    <button type="button" class="btn btn-danger" data-repeater-delete>-</button>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                        @else
                                        <div data-repeater-item>
                                            <div class="row">
                                                <div class="mb-6 col-10">
                                                    <label class="form-label" for="travel-period">Travel Period *</label>
                                                    <input type="text" id="travel-period" name="travel_period" class="form-control flatpickr-range1" placeholder="YYYY-MM-DD to YYYY-MM-DD" required />
                                                </div>
                                                <div class="mt-5 mb-6 col-2">
                                                    <button type="button" class="btn btn-danger" data-repeater-delete>-</button>
                                                </div>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                    <button type="button" class="btn btn-primary" data-repeater-create><i class='ti ti-plus ti-xs me-2'></i> Add More</button>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

                <div class="card mb-6">
                    <div class="card-header">
                        <h5 class="card-title mb-0">SEO Details</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="mb-6 col-4">
                                <label class="form-label" for="seo-title">Title *</label>
                                <input type="text" id="seo-title" name="seo_title" class="form-control" value="{{ old('seo_details', $package->seo_details['seo_title'] ?? '') }}" required>
                            </div>
                            <div class="mb-6 col-4">
                                <label class="form-label" for="seo-description">Description *</label>
                                <textarea id="seo-description" name="seo_description" class="form-control" required>{{ old('seo_details', $package->seo_details['seo_description'] ?? '') }}</textarea>
                            </div>
                            <div class="mb-6 col-4">
                                <label class="form-label" for="seo-keywords">Keywords *</label>
                                <input type="text" id="seo-keywords" name="seo_keywords" class="form-control" required value="{{ old('seo_details', $package->seo_details['seo_keywords'] ?? '') }}">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-6">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Package Curator</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="mb-6 col-4">
                                <label class="form-label" for="package-curator">Package Curator *</label>
                                <select id="package-curator" name="package_curator" class="form-select" required>
                                    <option value="">Select Curator</option>
                                    <option value="1" {{ old('created_by', $package->created_by ?? '') == "1" ? 'selected' : '' }}>Zeeshan</option>
                                    <option value="2" {{ old('created_by', $package->created_by ?? '') == "2" ? 'selected' : '' }}>Fahad</option>
                                </select>
                            </div>

                            <div class="mb-6 col-4">
                                <label class="form-label" for="package-status">Package Status *</label>
                                <select id="package-status" name="package_status" class="form-select" required>
                                    <option value="">Select Status</option>
                                    <option value="1" {{ old('status', $package->status ?? '') == "1" ? 'selected' : '' }}>Active</option>
                                    <option value="2" {{ old('status', $package->status ?? '') == "2" ? 'selected' : '' }}>In-Active</option>
                                    <option value="0" {{ old('status', $package->status ?? '') == "0" ? 'selected' : '' }}>Pending</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-6 row-gap-4">
                    <div class="d-flex flex-column justify-content-center"></div>
                    <div class="d-flex align-content-center flex-wrap gap-4">      
                        <button type="submit" class="btn btn-primary waves-effect waves-light">Submit Package</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection