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

@section('page-script')
@vite([
'resources/assets/js/flight-inventory-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">Edit Activity</h4>
            <p class="mb-0">Provide the necessary details to create a new activity</p>
        </div>
    </div>


    <div class="row">
        <!-- First column-->
        <div class="col-12 col-lg-12">
            <!-- Success Alert -->
            @if(session('success'))
            <div class="alert alert-solid-success d-flex align-items-center" role="alert">
                <span class="alert-icon rounded">
                    <i class="ti ti-check"></i>
                </span>
                {{ session('success') }}
            </div>
            @endif

            @if(session('error'))
            <div class="alert alert-solid-danger d-flex align-items-center" role="alert">
                <span class="alert-icon rounded">
                    <i class="ti ti-ban"></i>
                </span>
                {{ session('error') }}
            </div>
            @endif

            <!-- Error Alert -->
            @if($errors->any())
            <div class="alert alert-solid-danger d-flex align-items-center" role="alert">
                <span class="alert-icon rounded">
                    <i class="ti ti-ban"></i>
                </span>
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
            <div class="card mb-6">
                <div class="card-header">
                    <h5 class="card-title mb-0">Edit Activity</h5>
                </div>
                <div class="card-body">
                    <form action="{{route('activities.update', $activity->id)}}" method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="mb-6 col-12">
                                <label class="form-label" for="activity-title">Activity Title *</label>
                                <input type="text" id="activity-title" name="activity_title" class="form-control" placeholder="Enter Activity Title" value="{{ $activity->activity_title }}" required>
                            </div>

                            <div class="mb-6 col-12">
                                <label class="form-label" for="activity-description">Activity Description</label>
                                <textarea id="activity-description" name="activity_description" class="form-control" placeholder="Enter Activity Description">{{ $activity->activity_description }}</textarea>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-6 col-6">
                                <label class="form-label" for="activity-duration">Activity Duration *</label>
                                <input type="text" id="activity-duration" name="activity_duration" class="form-control" value="{{ $activity->activity_duration }}" placeholder="Enter Activity Duration" required>
                            </div>

                            <div class="mb-6 col-6">
                                <label class="form-label" for="activity-country">Activity Country *</label>
                                <select id="country" name="country" class="select2 form-select" required>
                                    <option value="">Select Country</option>
                                    @foreach($countries as $country)
                                    <option value="{{$country->alpha2}}" {{ $country->alpha2 == $activity->country ? 'selected' : '' }}>{{$country->langEN}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-6 col-6">
                                <label class="form-label" for="activity-city">Activity City *</label>
                                <input type="text" id="activity-city" name="activity_city_name" class="form-control" placeholder="Enter City" value="{{ $activity->activity_city_name }}" required>
                            </div>  
                            <div class="mb-6 col-6">
                                <label class="form-label" for="activity-max-occupancy">Max Occupancy *</label>
                                <input type="number" id="activity-max-occupancy" name="activity_max_occupancy" class="form-control" placeholder="Enter Max Occupancy" value="{{ $activity->activity_max_occupancy }}" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-6 col-4">
                                <label class="form-label" for="supplier">Supplier *</label>
                                <select id="supplier" name="supplier_id" class="select2 form-select" required>
                                    <option value="">Select Supplier</option>
                                    @foreach($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}" {{ $supplier->id == $activity->supplier_id ? 'selected' : '' }}>{{ $supplier->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-6 col-4">
                                <label class="form-label" for="pricing-type">Pricing Type *</label>
                                <select id="pricing-type" name="pricing_type" class=" form-select" required>
                                    <option value="PERPAX" {{ "PERPAX" == $activity->pricing_type ? 'selected' : '' }}>Per Pax</option>
                                    <option value="PERACTIVITY" {{ "PERACTIVITY" == $activity->pricing_type ? 'selected' : '' }}>Per Activity</option>
                                </select>
                            </div>

                            <div class="mb-6 col-4">
                                <label class="form-label" for="pax-currency">Currency *</label>
                                <select id="currency" name="currency" class="select2 form-select" required>
                                    <option value="AED" {{ "AED" == $activity->currency ? 'selected' : '' }}>AED</option>
                                    <option value="USD" {{ "USD" == $activity->currency ? 'selected' : '' }}>USD</option>
                                    <option value="EUR" {{ "EUR" == $activity->currency ? 'selected' : '' }}>EUR</option>
                                </select>       
                            </div>
                        </div>

                        <!-- Pricing Fields (will show dynamically based on pricing type) -->
                        <div id="per-pax-pricing">
                            <div class="row">                                    
                                <div class="mb-6 col-4">
                                    <label class="form-label" for="per-adult">Per Adult *</label>
                                    <input type="number" id="per-adult" name="per_adult" class="form-control" placeholder="Enter Price" value="{{ $activity->per_adult_price }}">
                                </div>

                                <div class="mb-6 col-4">
                                    <label class="form-label" for="per-child">Per Child *</label>
                                    <input type="number" id="per-child" name="per_child" class="form-control" placeholder="Enter Price" value="{{ $activity->per_child_price }}">
                                </div>

                                <!-- Child Age Field (Only visible if pricing type is "Per Pax") -->                                
                                <div class="mb-6 col-4">
                                    <label class="form-label" for="child-age">Paid Child Age From</label>
                                    <input type="number" id="child-age" name="paid_child_age_from" class="form-control" placeholder="Enter Paid Child Age From" value="{{ $activity->paid_child_age_from }}">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-6 col-6" id="per-activity-pricing" style="display: none;">
                                <label class="form-label" for="activity-price">Price per Activity *</label>
                                <input type="number" id="activity-price" name="per_activity_price" class="form-control" placeholder="Enter Price per Activity" value="{{ $activity->per_activity_price }}">
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-6 col-6">
                                <label class="form-label" for="activity-image">Activity Image</label>
                                <input type="file" id="activity-image" name="activity_image" class="form-control">
                                <small>Note: Upload jpeg/png with max file size up to 500kb.</small>
                            </div>

                            <div class="mb-6 col-6">
                                <label class="form-label" for="activity-status">Status *</label>
                                <select id="activity-status" name="status" class="select2 form-select" required>
                                    <option value="active" {{ "active" == $activity->status ? 'selected' : '' }}>Active</option>
                                    <option value="inactive" {{ "inactive" == $activity->status ? 'selected' : '' }}>In-Active</option>
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Edit Activity</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let pricingTypeSelect = document.getElementById("pricing-type");
        let perPaxPricing = document.getElementById("per-pax-pricing");
        let perActivityPricing = document.getElementById("per-activity-pricing");
        let paidChildAgeField = document.getElementById("child-age");

        function togglePricingFields() {
            let selectedValue = pricingTypeSelect.value;

            if (selectedValue === "PERPAX") {
                perPaxPricing.style.display = "block";
                perActivityPricing.style.display = "none";
                paidChildAgeField.removeAttribute("disabled");
            } else if (selectedValue === "PERACTIVITY") {
                perPaxPricing.style.display = "none";
                perActivityPricing.style.display = "block";
                paidChildAgeField.setAttribute("disabled", "disabled");
            }
        }

        // Trigger change event on page load (for edit mode)
        togglePricingFields();

        // Attach change event listener
        pricingTypeSelect.addEventListener("change", togglePricingFields);
    });
</script>

@endsection