@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-plan.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 Umrah 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.umrah.stepper', ['currentStep' => 3,'packageId'=>$package->id])

            <form action="{{ route('umrah-package-plan-store',$package->id) }}" method="POST" class="needs-validation" novalidate enctype="multipart/form-data">
                @csrf
                <input type="hidden" value="{{$package->id}}" name="package_id">
                <div id="plansContainer">
                    <div class="form-repeater">
                        <div data-repeater-list="plans">
                            @php $index = 0; @endphp
                            @foreach($planDetails->isNotEmpty() ? $planDetails : [null] as $planDetail)
                            <div data-repeater-item>
                                <div class="card mb-6">
                                    <div class="card-header row">
                                        <div class="mb-4 col-9">
                                            <h5 class="card-title mb-0">Plan #{{ $index + 1 }}</h5>
                                        </div>
                                        <div class="mb-4 col-3">
                                            <button type="button" class="btn btn-danger" data-repeater-delete>Remove Plan</button>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                         @if(isset($planDetail))
                                        <input type="hidden" value="{{$planDetail->id}}" name="id">
                                        @endif
                                        
                                        <div class='row'>
                                            <div class="mb-4 col-4">
                                                <label class="form-check">
                                                    <input type="checkbox" class="form-check-input include-section" data-section="flightSection" name="include_flight"
                                                           {{ isset($planDetail) && $planDetail->is_include_flight == 1 ? 'checked' : '' }}>
                                                    <span>Is Flight Included?</span>
                                                </label>
                                            </div>
                                            <div class="mb-4 col-4">
                                                <label class="form-check">
                                                    <input type="checkbox" class="form-check-input include-section" data-section="hotelSection" name="include_hotel"
                                                           {{ isset($planDetail) && $planDetail->is_include_hotel == 1 ? 'checked' : '' }}>
                                                    <span>Is Hotel Included?</span>
                                                </label>
                                            </div>
                                            <div class="mb-4 col-4">
                                                <label class="form-check">
                                                    <input type="checkbox" class="form-check-input include-section" data-section="transferSection" name="include_transfer"
                                                           {{ isset($planDetail) && $planDetail->is_include_transfer == 1 ? 'checked' : '' }}>
                                                    <span>Is Transfer Included?</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card mb-6 flightSection" style="{{ isset($planDetail) && $planDetail->is_include_flight == 1 ? '' : 'display: none;' }}">
                                    <div class="card-body">
                                        <div class="mb-4 mt-4">
                                            <label class="form-label">Select Flight:</label>
                                            <select name="flight_id" class="form-control inventory_id" data-name="flight">
                                                <option value="">Select a Flight</option>
                                                @foreach($flights as $flight)
                                                <option value="{{ $flight->id }}" {{ isset($planDetail) && $planDetail->flight_ids == $flight->id ? 'selected' : '' }}>
                                                    {{ $flight->carrier }} - {{ $flight->departure_airport }} to {{ $flight->arrival_airport }} ({{ $flight->departure_date }})
                                                </option>
                                                @endforeach
                                            </select>
                                            <div id="flight_details" class="mt-3 p-3 border rounded">Loading...</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card mb-6 hotelSection" style="{{ isset($planDetail) && $planDetail->is_include_hotel == 1 ? '' : 'display: none;' }}">
                                    <div class="card-body">
                                        <div class="mb-4 mt-4">
                                            <label class="form-label">Select Hotel:</label>
                                            <select name="hotel_id" class="form-control inventory_id" data-name="hotel">
                                                <option value="">Select a Hotel</option>
                                                @foreach($hotels as $hotel)
                                                <option value="{{ $hotel->id }}" {{ isset($planDetail) && $planDetail->hotel_ids == $hotel->id ? 'selected' : '' }}>
                                                    {{ $hotel->name }} - {{ $hotel->city }}, {{ $hotel->country }} ({{ $hotel->star_rating }}★)
                                                </option>
                                                @endforeach
                                            </select>
                                            <div id="hotel_details" class="mt-3 p-3 border rounded">Loading...</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card mb-6 transferSection" style="{{ isset($planDetail) && $planDetail->is_include_transfer == 1 ? '' : 'display: none;' }}">
                                    <div class="card-body">
                                        <div class="mb-4 mt-4">
                                            <label class="form-label">Select Transfer:</label>
                                            <select name="transfer_id" class="form-control inventory_id" data-name="transfer">
                                                <option value="">Select a Transfer</option>
                                                @foreach($transfers as $transfer)
                                                <option value="{{ $transfer->id }}" {{ isset($planDetail) && $planDetail->transfer_ids == $transfer->id ? 'selected' : '' }}>
                                                    {{ $transfer->transfer_from }} → {{ $transfer->transfer_to }} ({{ $transfer->vehicle_type }})
                                                </option>
                                                @endforeach
                                            </select>
                                            <div id="transfer_details" class="mt-3 p-3 border rounded">Loading...</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @php $index++; @endphp
                            @endforeach
                        </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 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 Plan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    var cities = @json($cities);
            var carriers = @json($carriers);
            var existingPackagePlan = @json($package);
</script>
@endsection