@extends('layouts.app')

@section('content')

<div class="d-flex justify-content-between align-items-center mb-3">

    <h5 class="mb-0" style="font-weight:600;">
        <i class="fas fa-folder me-2" style="color:var(--admin-primary)"></i>
        {{ isset($category) ? 'Edit Package' : 'Create Package' }}
    </h5>

    <a href="{{ route('categories.index') }}" class="btn-admin-outline">
        <i class="fas fa-arrow-left me-1"></i> Back
    </a>

</div>


<div class="admin-card">

    <div class="admin-card-body">

        @include('partials.errors')

        <form action="{{ isset($category) ? route('categories.update', $category->id) : route('categories.store') }}"
              method="POST"
              enctype="multipart/form-data"
              class="admin-form">

            @csrf

            @if(isset($category))
                @method('PUT')
            @endif


            <div class="row">


                <!-- Package Name -->
                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Package Name <span class="text-danger">*</span>
                    </label>

                    <input
                        type="text"
                        name="name"
                        class="form-control"
                        placeholder="e.g. AGRA SAME DAY PACKAGE"
                        value="{{ old('name', $category->name ?? '') }}"
                        required>

                </div>


                <!-- Package Subtitle -->
                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Package Subtitle
                    </label>

                    <input
                        type="text"
                        name="subtitle"
                        class="form-control"
                        placeholder="e.g. Agra Fort, Taj Mahal, Mathura, Vrindavan"
                        value="{{ old('subtitle', $category->subtitle ?? '') }}">

                </div>


                <!-- Duration -->
                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Duration <span class="text-danger">*</span>
                    </label>

                    <input
                        type="text"
                        name="duration"
                        class="form-control"
                        placeholder="e.g. 12 Hours"
                        value="{{ old('duration', $category->duration ?? '') }}"
                        required>

                </div>


                <!-- Destination -->
                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Destination <span class="text-danger">*</span>
                    </label>

                    <input
                        type="text"
                        name="destination"
                        class="form-control"
                        placeholder="e.g. Agra"
                        value="{{ old('destination', $category->destination ?? '') }}"
                        required>

                </div>


                <!-- Group Size -->
                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Group Size <span class="text-danger">*</span>
                    </label>

                    <input
                        type="text"
                        name="group_size"
                        class="form-control"
                        placeholder="e.g. 50-60 People"
                        value="{{ old('group_size', $category->group_size ?? '') }}"
                        required>

                </div>


                <!-- Transport -->
                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Transport <span class="text-danger">*</span>
                    </label>

                    <input
                        type="text"
                        name="transport"
                        class="form-control"
                        placeholder="e.g. AC Bus"
                        value="{{ old('transport', $category->transport ?? '') }}"
                        required>

                </div>



                <!-- Price Per Person -->
                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Price Per Person <span class="text-danger">*</span>
                    </label>

                    <input
                        type="number"
                        name="price"
                        class="form-control"
                        step="0.01"
                        min="0"
                        placeholder="e.g. 700"
                        value="{{ old('price', $category->price ?? '') }}"
                        required>

                </div>


                <!-- Category Type / Is Home -->
                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Is Home <span class="text-danger">*</span>
                    </label>

                    <select name="is_home" class="form-control" required>

                        <option value="">Select</option>

                        <option value="0"
                            {{ old('is_home', $category->is_home ?? '') == '0' ? 'selected' : '' }}>
                            No
                        </option>

                        <option value="1"
                            {{ old('is_home', $category->is_home ?? '') == '1' ? 'selected' : '' }}>
                            Yes
                        </option>

                    </select>

                </div>
               


                <!-- Category Image -->
                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Category Image
                    </label>

                    <input
                        type="file"
                        name="image"
                        class="form-control"
                        accept="image/*">

                    @if(isset($category) && !empty($category->image))

                        <div class="mt-2">

                            <img
                                src="{{ asset('storage/categories/'.$category->image) }}"
                                style="height:90px;border-radius:6px;border:1px solid #ddd;">

                        </div>

                    @endif

                </div>


                <!-- Category Banner Image -->
                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Category Banner Image
                    </label>

                    <input
                        type="file"
                        name="banner_image"
                        class="form-control"
                        accept="image/*">

                    @if(isset($category) && !empty($category->banner_image))

                        <div class="mt-2">

                            <img
                                src="{{ asset('storage/categories/'.$category->banner_image) }}"
                                style="height:90px;border-radius:6px;border:1px solid #ddd;">

                        </div>

                    @endif

                </div>

                


            </div>

              <hr>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5>
                  
                    Package Amenities
                </h5>
            </div>

        <div id="amenitiesWrapper">
            <div class="row">
                @if(isset($amenities) && count($amenities) > 0)
                    @php
                        
                        $selectedAmenities = $category->amenities ?? [];
                    @endphp

                    @foreach($amenities as $amenity)
                        <div class="col-md-2 mb-2">
                            <div class="form-check">
                                <input type="checkbox"
                                    class="form-check-input"
                                    id="amenity_{{ $amenity->id }}"
                                    name="amenities[]"
                                    value="{{ $amenity->id }}"
                                    {{ in_array($amenity->id, $selectedAmenities) ? 'checked' : '' }}>
                                <label class="form-check-label" for="amenity_{{ $amenity->id }}">
                                    <i class="fa-solid {{ $amenity->icon }}"></i> {{ $amenity->title }}
                                </label>
                            </div>
                        </div>
                    @endforeach
                @else
                    <p class="text-muted">No amenities found.</p>
                @endif
            </div>
        </div>
       <hr>
         <div class="row">
              <div class="col-md-6 mb-3">
                    <label class="form-label">
                        Description
                    </label>

                    <textarea
                        name="description"
                        class="form-control"
                        rows="5"
                        placeholder="Enter description">{{ old('description', $category->description ?? '') }}</textarea>

                   
                </div>

                    <!-- Our Services -->
              <div class="col-md-6 mb-3">

                <label class="form-label">
                    Our Services
                </label>

                <div id="services-wrapper">

                    @php
                        $services = old('services', $category->services ?? []);

                        if (is_string($services)) {
                            $services = json_decode($services, true) ?? [];
                        }

                        if (empty($services)) {
                            $services = [
                                [
                                    'icon' => '',
                                    'title' => ''
                                ]
                            ];
                        }
                    @endphp

                    @foreach($services as $index => $service)

                        <div class="service-item border rounded p-3 mb-2">

                            <div class="row">

                                <!-- Service Icon -->
                                <div class="col-md-4 mb-2">

                                    <label class="form-label">
                                        Icon
                                    </label>

                                    <input
                                        type="text"
                                        name="services[{{ $index }}][icon]"
                                        class="form-control"
                                        placeholder="e.g. fa-bus"
                                        value="{{ $service['icon'] ?? '' }}">

                                    <small class="text-muted">
                                        FontAwesome icon
                                    </small>

                                </div>


                                <!-- Service Title -->
                                <div class="col-md-6 mb-2">

                                    <label class="form-label">
                                        Title
                                    </label>

                                    <input
                                        type="text"
                                        name="services[{{ $index }}][title]"
                                        class="form-control"
                                        placeholder="Enter service title"
                                        value="{{ $service['title'] ?? '' }}">

                                </div>


                                <!-- Remove -->
                                <div class="col-md-2 mb-2 d-flex align-items-end">

                                    <button
                                        type="button"
                                        class="btn btn-danger remove-service"
                                        style="width:100%;">

                                        <i class="fas fa-trash"></i>

                                    </button>

                                </div>

                            </div>

                        </div>

                    @endforeach

                </div>


                <!-- Add More -->
                <button
                    type="button"
                    class="btn btn-sm btn-admin-outline mt-1"
                    id="add-service">

                    <i class="fas fa-plus me-1"></i>
                    Add More

                </button>

            </div>
<hr/>
            <!-- Tour Itinerary & Timings -->
<div class="col-md-12 mb-3">

    <label class="form-label">
        Tour Itinerary & Timings
    </label>

    <div id="itinerary-wrapper">

        @php
            $itinerary = old('itinerary', $category->itinerary ?? []);

            if (is_string($itinerary)) {
                $itinerary = json_decode($itinerary, true) ?? [];
            }

            if (empty($itinerary)) {
                $itinerary = [
                    [
                        'destination' => '',
                        'arrival' => '',
                        'departure' => ''
                    ]
                ];
            }
        @endphp

        @foreach($itinerary as $index => $item)

            <div class="itinerary-item border rounded p-3 mb-2">

                <div class="row">

                    <!-- Destination -->
                    <div class="col-md-6 mb-2">

                        <label class="form-label">
                            Destination
                        </label>

                        <input
                            type="text"
                            name="itinerary[{{ $index }}][destination]"
                            class="form-control"
                            placeholder="e.g. Agra Fort"
                            value="{{ $item['destination'] ?? '' }}">

                    </div>


                    <!-- Arrival -->
                    <div class="col-md-2 mb-2">

                        <label class="form-label">
                            Arrival
                        </label>

                        <input
                            type="text"
                            name="itinerary[{{ $index }}][arrival]"
                            class="form-control"
                            placeholder="e.g. 11:30 AM"
                            value="{{ $item['arrival'] ?? '' }}">

                    </div>


                    <!-- Departure -->
                    <div class="col-md-2 mb-2">

                        <label class="form-label">
                            Departure
                        </label>

                        <input
                            type="text"
                            name="itinerary[{{ $index }}][departure]"
                            class="form-control"
                            placeholder="e.g. 12:30 PM"
                            value="{{ $item['departure'] ?? '' }}">

                    </div>


                    <!-- Remove -->
                    <div class="col-md-2 mb-2 d-flex align-items-end">

                        <button
                            type="button"
                            class="btn btn-danger remove-itinerary"
                            style="width:100%;">

                            <i class="fas fa-trash"></i>

                        </button>

                    </div>

                </div>

            </div>

        @endforeach

    </div>


    <button
        type="button"
        class="btn btn-sm btn-admin-outline"
        id="add-itinerary">

        <i class="fas fa-plus me-1"></i>
        Add More

    </button>

</div>


<!-- Tour Notes -->
<div class="col-md-6 mb-3">

    <label class="form-label">
        Tour Notes
    </label>

    <textarea
        name="tour_notes"
        class="form-control"
        rows="4"
        placeholder="e.g. Friday: Taj Mahal Closed">{{ old('tour_notes', $category->tour_notes ?? '') }}</textarea>

</div>


<!-- Fare Includes -->
<div class="col-md-6 mb-3">

    <label class="form-label">
        Fare Includes
    </label>

    <textarea
        name="fare_includes"
        class="form-control"
        rows="4"
        placeholder="e.g. Bus & Professional Tour Guide Only">{{ old('fare_includes', $category->fare_includes ?? '') }}</textarea>

</div>

<hr/>
<!-- Pickup Timing -->
<div class="col-md-12 mb-3">

    <label class="form-label">
        Pickup Timing
    </label>

    <div id="pickup-wrapper">

        @php
            $pickupPoints = old('pickup_points', $category->pickup_points ?? []);

            if (is_string($pickupPoints)) {
                $pickupPoints = json_decode($pickupPoints, true) ?? [];
            }

            if (empty($pickupPoints)) {
                $pickupPoints = [
                    [
                        'boarding_point' => '',
                        'pickup_time' => ''
                    ]
                ];
            }
        @endphp

        @foreach($pickupPoints as $index => $pickup)

            <div class="pickup-item border rounded p-3 mb-2">

                <div class="row">

                    <!-- Boarding Point -->
                    <div class="col-md-8 mb-2">

                        <label class="form-label">
                            Boarding Point
                        </label>

                        <input
                            type="text"
                            name="pickup_points[{{ $index }}][boarding_point]"
                            class="form-control"
                            placeholder="e.g. Karol Bagh Metro Station"
                            value="{{ $pickup['boarding_point'] ?? '' }}">

                    </div>


                    <!-- Pickup Time -->
                    <div class="col-md-2 mb-2">

                        <label class="form-label">
                            Pickup Time
                        </label>

                        <input
                            type="text"
                            name="pickup_points[{{ $index }}][pickup_time]"
                            class="form-control"
                            placeholder="e.g. 06:00 AM"
                            value="{{ $pickup['pickup_time'] ?? '' }}">

                    </div>


                    <!-- Remove -->
                    <div class="col-md-2 mb-2 d-flex align-items-end">

                        <button
                            type="button"
                            class="btn btn-danger remove-pickup"
                            style="width:100%;">

                            <i class="fas fa-trash"></i>

                        </button>

                    </div>

                </div>

            </div>

        @endforeach

    </div>


    <button
        type="button"
        class="btn btn-sm btn-admin-outline"
        id="add-pickup">

        <i class="fas fa-plus me-1"></i>
        Add More

    </button>

</div>
         </div>


            <button type="submit" class="btn-admin-primary">

                <i class="fas fa-save me-1"></i>

                {{ isset($category) ? 'Update Package' : 'Add Package' }}

            </button>


        </form>

    </div>

</div>

@endsection


@section('scripts')
<script>

document.addEventListener('DOMContentLoaded', function () {

    let serviceIndex = document.querySelectorAll('.service-item').length;

    const wrapper = document.getElementById('services-wrapper');
    const addButton = document.getElementById('add-service');


    // Add More Service
    addButton.addEventListener('click', function () {

        const html = `
            <div class="service-item border rounded p-3 mb-2">

                <div class="row">

                    <!-- Service Icon -->
                    <div class="col-md-4 mb-2">

                        <label class="form-label">
                            Icon
                        </label>

                        <input
                            type="text"
                            name="services[${serviceIndex}][icon]"
                            class="form-control"
                            placeholder="e.g. fa-bus">

                        <small class="text-muted">
                            FontAwesome icon
                        </small>

                    </div>


                    <!-- Service Title -->
                    <div class="col-md-6 mb-2">

                        <label class="form-label">
                            Title
                        </label>

                        <input
                            type="text"
                            name="services[${serviceIndex}][title]"
                            class="form-control"
                            placeholder="Enter service title">

                    </div>


                    <!-- Remove -->
                    <div class="col-md-2 mb-2 d-flex align-items-end">

                        <button
                            type="button"
                            class="btn btn-danger remove-service"
                            style="width:100%;">

                            <i class="fas fa-trash"></i>

                        </button>

                    </div>

                </div>

            </div>
        `;

        wrapper.insertAdjacentHTML('beforeend', html);

        serviceIndex++;

    });


    // Remove Service
    wrapper.addEventListener('click', function (e) {

        const removeButton = e.target.closest('.remove-service');

        if (!removeButton) {
            return;
        }

        const serviceItems = wrapper.querySelectorAll('.service-item');

        // Kam se kam ek service row rahe
        if (serviceItems.length > 1) {

            removeButton.closest('.service-item').remove();

        } else {

            const iconInput = serviceItems[0].querySelector('input[name*="[icon]"]');
            const titleInput = serviceItems[0].querySelector('input[name*="[title]"]');

            if (iconInput) {
                iconInput.value = '';
            }

            if (titleInput) {
                titleInput.value = '';
            }

        }

    });

});

</script>
<script>

document.addEventListener('DOMContentLoaded', function () {

    /* ==========================================
       TOUR ITINERARY
    ========================================== */

    let itineraryIndex =
        document.querySelectorAll('.itinerary-item').length;

    const itineraryWrapper =
        document.getElementById('itinerary-wrapper');

    const addItinerary =
        document.getElementById('add-itinerary');


    addItinerary.addEventListener('click', function () {

        const html = `
            <div class="itinerary-item border rounded p-3 mb-2">

                <div class="row">

                    <div class="col-md-6 mb-2">

                        <label class="form-label">
                            Destination
                        </label>

                        <input
                            type="text"
                            name="itinerary[${itineraryIndex}][destination]"
                            class="form-control"
                            placeholder="e.g. Agra Fort">

                    </div>


                    <div class="col-md-2 mb-2">

                        <label class="form-label">
                            Arrival
                        </label>

                        <input
                            type="text"
                            name="itinerary[${itineraryIndex}][arrival]"
                            class="form-control"
                            placeholder="e.g. 11:30 AM">

                    </div>


                    <div class="col-md-2 mb-2">

                        <label class="form-label">
                            Departure
                        </label>

                        <input
                            type="text"
                            name="itinerary[${itineraryIndex}][departure]"
                            class="form-control"
                            placeholder="e.g. 12:30 PM">

                    </div>


                    <div class="col-md-2 mb-2 d-flex align-items-end">

                        <button
                            type="button"
                            class="btn btn-danger remove-itinerary"
                            style="width:100%;">

                            <i class="fas fa-trash"></i>

                        </button>

                    </div>

                </div>

            </div>
        `;

        itineraryWrapper.insertAdjacentHTML(
            'beforeend',
            html
        );

        itineraryIndex++;

    });


    itineraryWrapper.addEventListener('click', function (e) {

        const button =
            e.target.closest('.remove-itinerary');

        if (!button) {
            return;
        }

        const items =
            itineraryWrapper.querySelectorAll('.itinerary-item');

        if (items.length > 1) {

            button.closest('.itinerary-item').remove();

        }

    });


    /* ==========================================
       PICKUP POINTS
    ========================================== */

    let pickupIndex =
        document.querySelectorAll('.pickup-item').length;

    const pickupWrapper =
        document.getElementById('pickup-wrapper');

    const addPickup =
        document.getElementById('add-pickup');


    addPickup.addEventListener('click', function () {

        const html = `
            <div class="pickup-item border rounded p-3 mb-2">

                <div class="row">

                    <div class="col-md-8 mb-2">

                        <label class="form-label">
                            Boarding Point
                        </label>

                        <input
                            type="text"
                            name="pickup_points[${pickupIndex}][boarding_point]"
                            class="form-control"
                            placeholder="e.g. Karol Bagh Metro Station">

                    </div>


                    <div class="col-md-2 mb-2">

                        <label class="form-label">
                            Pickup Time
                        </label>

                        <input
                            type="text"
                            name="pickup_points[${pickupIndex}][pickup_time]"
                            class="form-control"
                            placeholder="e.g. 06:00 AM">

                    </div>


                    <div class="col-md-2 mb-2 d-flex align-items-end">

                        <button
                            type="button"
                            class="btn btn-danger remove-pickup"
                            style="width:100%;">

                            <i class="fas fa-trash"></i>

                        </button>

                    </div>

                </div>

            </div>
        `;

        pickupWrapper.insertAdjacentHTML(
            'beforeend',
            html
        );

        pickupIndex++;

    });


    pickupWrapper.addEventListener('click', function (e) {

        const button =
            e.target.closest('.remove-pickup');

        if (!button) {
            return;
        }

        const items =
            pickupWrapper.querySelectorAll('.pickup-item');

        if (items.length > 1) {

            button.closest('.pickup-item').remove();

        }

    });

});

</script>
@endsection