@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'
])
@endsection

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

@section('page-script')
@vite([
'resources/assets/js/hotel-inventory-addumrah.js'
])
@endsection

@section('content')
<div class="app-ecommerce">
    <form action="{{ isset($package) ? route('hybrid-package-details-update', $package->id) : route('inventory-hotel-addRoom') }}" method="POST" class="needs-validation" novalidate>
        @csrf
        <!-- 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 Hotel Inventory</h4>
                <p class="mb-0">Orders placed across your store</p>
            </div>
            <div class="d-flex align-content-center flex-wrap gap-4">
                <button type="submit" class="btn btn-primary">Save Inventory</button>
            </div>
        </div>

        <div class="row">
            @include('content.hybrid.package.alerts')
            <!-- First column-->
            <div class="col-12 col-lg-12">
                <!-- Product Information -->
                <div class="card mt-3 mb-6">
                    <div class="card-header">
                        <h6 class="card-title">Select Hotel</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Hotel Name -->
                            <div class="mb-6 col-6">
                                <label class="form-label" for="hotel-name">Hotel Name *</label>
<!--                                <select id="hotel-autosearch" name="hotel_id" class="select2 form-select" placeholder="Enter hotel name" data-selected="{{ json_encode(isset($package->departing_cities) ?array_unique($package->departing_cities): []) }}" required></select>-->
                                <select name="hotel_id" class="select2 form-select" placeholder="Enter hotel name" required onchange="redirectToEdit(this)">
                                    <option value="">Select Hotel</option>
                                    @foreach($hotels as $hotel)
                                    <option value="{{$hotel->id}}" {{ isset($hotelInventory['id']) && $hotelInventory['id'] == $hotel->id ? 'selected' : '' }}>{{$hotel->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Room Types & Availability -->
                <div class="card mt-3 mb-6 {{ $action == 'new' ? 'opacity-50 pointer-events-none' : '' }}">
                    <div class="card-header">
                        <h6 class="card-title">Hotel Rooms & Availability</h6>
                    </div>
                    <div class="card-body">
                        <!--begin::Repeater-->
                        <div id="kt_docs_repeater_nested">
                            <!--begin::Form group-->
                            <div class="form-group">
                                <div data-repeater-list="rooms">
                                    @if(isset($rooms) && count($rooms) > 0)
                                    @foreach ($rooms as $room)
                                    <div data-repeater-item>
                                        <div class="form-group row mb-5">
                                            <h6 class="card-title">Hotel Room Type</h6>
                                            <!-- Room Type -->
                                            <div class="col-md-3">
                                                <label class="form-label">Room Type *</label>
                                                <select name="room_type" class="select2 form-select" required>
                                                    <option value="">Select Room Type</option>
                                                    @foreach($roomConfig['roomTypes'] as $roomType)
                                                    <option value="{{$roomType}}" {{ $room['room_type'] == $roomType ? 'selected' : '' }}>{{$roomType}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label">Room View *</label>
                                                <select name="room_view" class="select2 form-select" required>
                                                    <option value="">Select Hotel View</option>
                                                    @foreach($roomConfig['roomViews'] as $roomView)
                                                    <option value="{{$roomView}}" {{ $room['room_view'] == $roomView ? 'selected' : '' }}>{{$roomView}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <!-- Bed Configuration -->
                                            <div class="col-md-3">
                                                <label class="form-label">Bed Configuration</label>
                                                <select name="bed_config" class="select2 form-select">
                                                    <option value="">Select Bed Configuration</option>
                                                     @foreach($roomConfig['bedOptions'] as $roomView)
                                                    <option value="{{$roomView}}" {{ $room['bed_config'] == $roomView ? 'selected' : '' }}>{{$roomView}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-3 mt-4">
                                                <a href="javascript:;" data-repeater-delete class="btn btn-danger">
                                                    <i class="ki-duotone ki-trash fs-5"></i> Remove Room
                                                </a>
                                            </div>
                                        </div>
                                        <!-- Availability Nested Repeater -->
                                        <div class="inner-repeater">
                                            <div data-repeater-list="availability" class="mb-5">
                                                @if(isset($room['availability']) && count($room['availability']) > 0)
                                                @foreach ($room['availability'] as $availability)
                                                <div data-repeater-item>
                                                    <div class="form-group row">
                                                        <h6 class="card-title">Rooms Availability</h6>
                                                        <!-- Date -->
                                                        <div class="col-md-4">
                                                            <label class="form-label" for="room-date">Date *</label>
                                                            <input type="text" id="room-date" name="date" class="form-control product-date" value="{{ isset($availability['start_date']) && isset($availability['end_date']) ? $availability['start_date'] . ' to ' . $availability['end_date'] : '' }}" required>
                                                        </div>
                                                        <!-- Available Rooms -->
                                                        <div class="col-md-4">
                                                            <label class="form-label">Room Allotment *</label>
                                                            <input type="number" name="available_rooms" class="form-control" value="{{ $availability['available_rooms'] }}" required>
                                                        </div>
                                                        <div class="col-md-4 mt-4">
                                                            <button class="btn btn-danger" data-repeater-delete>
                                                                Remove Availability
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row mt-5">
                                                        @foreach($mealTypes as $key => $roomType)
                                                        <div class="mb-6 col-2">
                                                            <label class="form-label" for="{{$roomType}}">{{$roomType}}</label>
                                                            <input type="number" id="{{$roomType}}" name="{{$key}}" class="form-control" placeholder="E.g., 100" value="{{ $availability[$key] }}" required>
                                                        </div>
                                                        @endforeach
                                                    </div>

                                                    <hr/>
                                                </div>
                                                @endforeach
                                                @else
                                                <div data-repeater-item>
                                                    <div class="form-group row">
                                                        <h6 class="card-title">Rooms Availability</h6>
                                                        <!-- Date -->
                                                        <div class="col-md-4">
                                                            <label class="form-label" for="room-date">Date *</label>
                                                            <input type="date" id="room-date" name="date" class="form-control product-date" required>
                                                        </div>
                                                        <!-- Available Rooms -->
                                                        <div class="col-md-4">
                                                            <label class="form-label">Room Allotment *</label>
                                                            <input type="number" name="available_rooms" class="form-control" required>
                                                        </div>
                                                        <div class="col-md-4 mt-4">
                                                            <button class="btn btn-danger" data-repeater-delete>
                                                                Remove Availability
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row mt-5">
                                                        @foreach($mealTypes as $key => $roomType)
                                                        <div class="mb-6 col-2">
                                                            <label class="form-label" for="{{$roomType}}">{{$roomType}}</label>
                                                            <input type="number" id="{{$roomType}}" name="{{$key}}" class="form-control" placeholder="E.g., 100" value="0" required>
                                                        </div>
                                                        @endforeach
                                                    </div>

                                                    <hr/>
                                                </div>
                                                @endif

                                            </div>
                                            <button class="btn btn-info mb-5" data-repeater-create type="button">
                                                <i class="ki-duotone ki-plus fs-5"></i> Add Availability
                                            </button>
                                        </div>
                                    </div>
                                    @endforeach
                                    @else 
                                    <div data-repeater-item>
                                        <div class="form-group row mb-5">
                                            <h6 class="card-title">Hotel Room Type</h6>
                                            <!-- Room Type -->
                                            <div class="col-md-3">
                                                <label class="form-label">Room Type *</label>
                                                <select name="room_type" class="select2 form-select" required>
                                                    <option value="">Select Room Type</option>
                                                    @foreach($roomConfig['roomTypes'] as $roomType)
                                                    <option value="{{$roomType}}">{{$roomType}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label">Room View *</label>
                                                <select name="room_view" class="select2 form-select" required>
                                                    <option value="">Select Hotel View</option>
                                                    @foreach($roomConfig['roomViews'] as $roomView)
                                                    <option value="{{$roomView}}">{{$roomView}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <!-- Bed Configuration -->
                                            <div class="col-md-3">
                                                <label class="form-label">Bed Configuration</label>
                                                <select name="bed_config" class="select2 form-select">
                                                    <option value="">Select Bed Configuration</option>
                                                     @foreach($roomConfig['bedOptions'] as $roomView)
                                                    <option value="{{$roomView}}">{{$roomView}}</option>
                                                    @endforeach

                                                </select>
                                            </div>
                                            <div class="col-md-3 mt-4">
                                                <a href="javascript:;" data-repeater-delete class="btn btn-danger">
                                                    <i class="ki-duotone ki-trash fs-5"></i> Remove Room
                                                </a>
                                            </div>
                                        </div>
                                        <!-- Availability Nested Repeater -->
                                        <div class="inner-repeater">
                                            <div data-repeater-list="availability" class="mb-5">
                                                <div data-repeater-item>
                                                    <div class="form-group row">
                                                        <h6 class="card-title">Rooms Availability</h6>
                                                        <!-- Date -->
                                                        <div class="col-md-4">
                                                            <label class="form-label" for="room-date">Date *</label>
                                                            <input type="date" id="room-date" name="date" class="form-control product-date" required>
                                                        </div>
                                                        <!-- Available Rooms -->
                                                        <div class="col-md-4">
                                                            <label class="form-label">Room Allotment *</label>
                                                            <input type="number" name="available_rooms" class="form-control" required>
                                                        </div>
                                                        <div class="col-md-4 mt-4">
                                                            <button class="btn btn-danger" data-repeater-delete>
                                                                Remove Availability
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row mt-5">
                                                        @foreach($mealTypes as $key => $roomType)
                                                        <div class="mb-6 col-2">
                                                            <label class="form-label" for="{{$roomType}}">{{$roomType}}</label>
                                                            <input type="number" id="{{$roomType}}" name="{{$key}}" class="form-control" placeholder="E.g., 100" value="0" required>
                                                        </div>
                                                        @endforeach
                                                    </div>

                                                    <hr/>
                                                </div>
                                            </div>
                                            <button class="btn btn-info mb-5" data-repeater-create type="button">
                                                <i class="ki-duotone ki-plus fs-5"></i> Add Availability
                                            </button>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                            <!--end::Form group-->
                            <!--begin::Form group-->
                            <div class="form-group">
                                <a href="javascript:;" data-repeater-create class="btn btn-primary">
                                    <i class="ki-duotone ki-plus fs-3"></i> Add Another Room
                                </a>
                            </div>
                            <!--end::Form group-->
                        </div>
                        <!--end::Repeater-->
                    </div>
                </div>
                <!-- /Media -->
                <!-- Inventory -->
                <div class="card mb-6 {{ $action == 'new' ? 'opacity-50 pointer-events-none' : '' }}">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Inventory Settings</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- Navigation -->
                            <div class="col-12 col-md-4 col-xl-5 col-xxl-4 mx-auto card-separator">
                                <div class="d-flex justify-content-between flex-column mb-4 mb-md-0 pe-md-4">
                                    <div class="nav-align-left">
                                        <ul class="nav nav-pills flex-column w-100">
                                            <!-- Sale Dates -->
                                            <li class="nav-item">
                                                <button type="button" class="nav-link active" data-bs-toggle="tab" data-bs-target="#sale-dates">
                                                    <i class="ti ti-calendar-time ti-sm me-1_5"></i>
                                                    <span class="align-middle">Sale Dates</span>
                                                </button>
                                            </li>
                                            <!-- Blacklist Dates -->
                                            <li class="nav-item">
                                                <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#blacklist-dates">
                                                    <i class="ti ti-calendar-off ti-sm me-1_5"></i>
                                                    <span class="align-middle">Blacklist Dates</span>
                                                </button>
                                            </li>
                                            <li class="nav-item">
                                                <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#attributes">
                                                    <i class="ti ti-link ti-sm me-1_5"></i>
                                                    <span class="align-middle">Special Requests</span>
                                                </button>
                                            </li>
                                            <li class="nav-item">
                                                <button type="button" class="nav-link" data-bs-toggle="tab" data-bs-target="#advanced">
                                                    <i class="ti ti-lock ti-sm me-1_5"></i>
                                                    <span class="align-middle">Channel Management</span>
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- /Navigation -->
                            <!-- Options -->
                            <div class="col-12 col-md-8 col-xl-7 col-xxl-8 pt-6 pt-md-0">
                                <div class="tab-content p-0 ps-md-4">
                                    <!-- Sale Dates Tab -->
                                    <div class="tab-pane fade show active" id="sale-dates" role="tabpanel">
                                        <h6 class="text-body">Sale Dates</h6>

                                        <div class="form-repeaters">
                                            <div data-repeater-list="sale_dates">
                                                @if(isset($saleDates) && count($saleDates) > 0)
                                                @foreach($saleDates as $saleDate)
                                                <div data-repeater-item>
                                                    <div class="row">
                                                        <!-- Sale Start Date -->
                                                        <div class="col-12 col-sm-5">
                                                            <label class="form-label" for="sale-start-date">Sale Start Date *</label>
                                                            <input type="text"  placeholder="YYYY-MM-DD" name="start-date" id="sale-start-date" value="{{$saleDate['start_date']}}" class="form-control sale-start-date" required>
                                                        </div>
                                                        <!-- Sale End Date -->
                                                        <div class="col-12 col-sm-5">
                                                            <label class="form-label" for="sale-end-date">Sale End Date *</label>
                                                            <input type="text" placeholder="YYYY-MM-DD" name="end-date" id="sale-end-date" value="{{$saleDate['end_date']}}" class="form-control sale-end-date" required>
                                                        </div>
                                                        <div class="col-12 col-sm-2">

                                                            <button type="button" class="btn btn-danger mt-5" data-repeater-delete>
                                                                <i class='ti ti-minus ti-xs me-2'></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endforeach
                                                @else
                                                <div data-repeater-item>
                                                    <div class="row">
                                                        <!-- Sale Start Date -->
                                                        <div class="col-12 col-sm-5">
                                                            <label class="form-label" for="sale-start-date">Sale Start Date *</label>
                                                            <input type="text"  placeholder="YYYY-MM-DD" name="start-date" id="sale-start-date" class="form-control sale-start-date" required>
                                                        </div>
                                                        <!-- Sale End Date -->
                                                        <div class="col-12 col-sm-5">
                                                            <label class="form-label" for="sale-end-date">Sale End Date *</label>
                                                            <input type="text" placeholder="YYYY-MM-DD" name="end-date" id="sale-end-date" class="form-control sale-end-date" required>
                                                        </div>
                                                        <div class="col-12 col-sm-2">

                                                            <button type="button" class="btn btn-danger mt-5" data-repeater-delete>
                                                                <i class='ti ti-minus ti-xs me-2'></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endif
                                            </div>
                                            <div class="col-12 col-sm-4">
                                                <button type="button" class="btn btn-primary mt-5" data-repeater-create>
                                                    <i class='ti ti-plus ti-xs me-2'></i>
                                                    Add
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Blacklist Dates Tab -->
                                    <div class="tab-pane fade" id="blacklist-dates" role="tabpanel">
                                        <h6 class="text-body">Blacklist Dates</h6>

                                        <div class="form-repeaters">
                                            <div data-repeater-list="blacklist_dates">
                                                @if(isset($blacklistDates) && count($blacklistDates) > 0)
                                                @foreach($blacklistDates as $blacklistDate)
                                                <div data-repeater-item>
                                                    <div class="row">
                                                        <!-- Sale Start Date -->
                                                        <div class="col-12 col-sm-5">
                                                            <label class="form-label" for="blacklist-date">Blacklist Date *</label>
                                                            <input type="text" name="blacklist-date" placeholder="YYYY-MM-DD" id="blacklist-date" value="{{$blacklistDate}}" class="form-control blacklistDate">
                                                        </div>
                                                        <div class="col-12 col-sm-2">

                                                            <button type="button" class="btn btn-danger mt-5" data-repeater-delete>
                                                                <i class='ti ti-minus ti-xs me-2'></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endforeach
                                                @else
                                                <div data-repeater-item>
                                                    <div class="row">
                                                        <!-- Sale Start Date -->
                                                        <div class="col-12 col-sm-5">
                                                            <label class="form-label" for="blacklist-date">Blacklist Date *</label>
                                                            <input type="text" name="blacklist-date" placeholder="YYYY-MM-DD" id="blacklist-date" class="form-control blacklistDate">
                                                        </div>
                                                        <div class="col-12 col-sm-2">

                                                            <button type="button" class="btn btn-danger mt-5" data-repeater-delete>
                                                                <i class='ti ti-minus ti-xs me-2'></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endif
                                            </div>
                                            <div class="col-12 col-sm-4">
                                                <button type="button" class="btn btn-primary mt-5" data-repeater-create>
                                                    <i class='ti ti-plus ti-xs me-2'></i>
                                                    Add
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Attributes Tab -->
                                    <div class="tab-pane fade" id="attributes" role="tabpanel">
                                        <h6 class="text-body">Special Requests</h6>
                                        <div class="row g-4 pe-md-4">
                                            <!-- Late Check-In -->
                                            <div class="col-12 col-sm-6">
                                                <label class="form-label" for="late-checkin">Late Check-In</label>
                                                <input type="time" name="late-checkin" id="late-checkin" class="form-control" value="{{ isset($hotelInventory['late_checkin']) ? $hotelInventory['late_checkin'] : '' }}">
                                            </div>
                                            <!-- Early Check-Out -->
                                            <div class="col-12 col-sm-6">
                                                <label class="form-label" for="early-checkout">Early Check-Out</label>
                                                <input type="time" name="early-checkout" id="early-checkout" class="form-control" value="{{ isset($hotelInventory['early_checkout']) ? $hotelInventory['early_checkout'] : '' }}">
                                            </div>
                                            <!-- Extra Bed -->
                                            <div class="col-12 col-sm-6">
                                                <label class="form-label" for="extra-bed">Extra Bed</label>
                                                <input type="number" name="extra-bed" id="extra-bed" class="form-control" value="{{ isset($hotelInventory['extra_bed_price']) ? $hotelInventory['extra_bed_price'] : '' }}" placeholder="E.g., $20">
                                            </div>
                                            <!-- Special Notes -->
                                            <div class="col-12">
                                                <label class="form-label" for="special-notes">Special Notes</label>
                                                <textarea name="special-notes" id="special-notes" class="form-control" rows="3" placeholder="E.g., No smoking, Pet-friendly">{{ isset($hotelInventory['special_notes']) ? $hotelInventory['special_notes'] : '' }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /Attributes Tab -->
                                    <!-- Advanced Tab -->
                                    <div class="tab-pane fade" id="advanced" role="tabpanel">
                                        <h6 class="mb-3 text-body">Sales Channels</h6>
                                        <div class="row">
                                            <!-- Multiple -->
                                            <div class="col-md-12 mb-6">
                                                <select id="select2Multiple" class="select2 form-select" name="sales_channels[]" multiple>
                                                    <option value="B2B" {{ (isset($salesChannels) && in_array("B2B",$salesChannels)) || !isset($salesChannels) ? 'selected' : '' }}>B2B</option>
                                                    <option value="B2C" {{ (isset($salesChannels) && in_array("B2C",$salesChannels)) || !isset($salesChannels) ? 'selected' : '' }}>B2C</option>
                                                    <option value="API" {{ (isset($salesChannels) && in_array("API",$salesChannels)) || !isset($salesChannels) ? 'selected' : '' }}>API</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /Advanced Tab -->
                                </div>
                            </div>
                            <!-- /Options-->
                        </div>
                    </div>
                </div>
                <!-- /Inventory -->
            </div>
            <!-- /Second column -->

        </div>
    </form>
</div>
<script>
    function redirectToEdit(select) {
        let hotelId = select.value;
        if (hotelId) {
            window.location.href = `/inventory/hotel/${hotelId}/holiday/edit`;  // Redirect to the edit page
        }
    }
</script>
@endsection