@extends('admin.layouts.master')

@section('title', 'Edit Package')

@section('content')
<div class="card">
    <div class="card-header">
        <h4>Edit Package - {{ $package->title }}</h4>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.packages.update', $package->id) }}" method="POST">
            @csrf
            @method('PUT')

            {{-- ================= General Info ================= --}}
            <h5>General Information</h5>
            <div class="row mb-3">
                <div class="col-md-6">
                    <label>Package Title</label>
                    <input type="text" name="title" value="{{ old('title', $package->title) }}" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <label>Available From</label>
                    <input type="date" name="available_from" value="{{ old('available_from', $package->available_from ? $package->available_from->format('Y-m-d') : '') }}" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <label>Available To</label>
                    <input type="date" name="available_to" value="{{ old('available_to', $package->available_to ? $package->available_to->format('Y-m-d') : '') }}" class="form-control" required>
                </div>
                <div class="col-md-4 mt-2">
                    <label>Bus Type</label>
                    <select name="bus_type_id" class="form-control" required>
                        @foreach($busTypes as $busType)
                            <option value="{{ $busType->id }}" {{ $package->bus_type_id == $busType->id ? 'selected' : '' }}>
                                {{ $busType->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 mt-2">
                    <label>Status</label>
                    <select name="status" class="form-control">
                        <option value="1" {{ $package->status == 1 ? 'selected' : '' }}>Active</option>
                        <option value="0" {{ $package->status == 0 ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="col-md-12 mt-2">
                    <label>Description</label>
                    <textarea name="description" class="form-control">{{ old('description', $package->description) }}</textarea>
                </div>
            </div>

            <hr>

            {{-- ================= Segments ================= --}}
            <h5>Trip Segments (Day-wise Plan)</h5>
            <div id="segments-wrapper">
                @foreach($package->segments as $i => $segment)
                <div class="row segment-row mb-2">
                    <input type="hidden" name="segments[{{ $i }}][id]" value="{{ $segment->id }}">
                    <div class="col-md-1">
                        <label>Day</label>
                        <input type="number" name="segments[{{ $i }}][day_number]" value="{{ $segment->day_number }}" class="form-control" min="1" required>
                    </div>
                    <div class="col-md-3">
                        <label>From (Starting Point)</label>
                        <select name="segments[{{ $i }}][from_location_id]" class="form-control" required>
                            @foreach($startingPoints as $sp)
                                <option value="{{ $sp->id }}" {{ $segment->from_location_id == $sp->id ? 'selected' : '' }}>{{ $sp->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>To (Destination)</label>
                        <select name="segments[{{ $i }}][to_location_id]" class="form-control" required>
                            @foreach($destinations as $dest)
                                <option value="{{ $dest->id }}" {{ $segment->to_location_id == $dest->id ? 'selected' : '' }}>{{ $dest->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label>Departure</label>
                        <input type="time" name="segments[{{ $i }}][departure_time]" value="{{ $segment->departure_time }}" class="form-control" required>
                    </div>
                    <div class="col-md-2">
                        <label>Arrival</label>
                        <input type="time" name="segments[{{ $i }}][arrival_time]" value="{{ $segment->arrival_time }}" class="form-control" required>
                    </div>
                    <div class="col-md-1">
                        <label>Halt</label>
                        <select name="segments[{{ $i }}][halt]" class="form-control">
                            <option value="0" {{ $segment->halt == 0 ? 'selected' : '' }}>No</option>
                            <option value="1" {{ $segment->halt == 1 ? 'selected' : '' }}>Yes</option>
                        </select>
                    </div>

                    {{-- ================= Stops ================= --}}
                    <div class="col-md-12 mt-2 stops">
                        <h6>Stops</h6>
                        <div class="stop-wrapper">
                            @foreach($segment->stops as $j => $stop)
                            <div class="stop-row mb-2 d-flex">
                                <input type="hidden" name="segments[{{ $i }}][stops][{{ $j }}][id]" value="{{ $stop->id }}">
                                <input type="text" name="segments[{{ $i }}][stops][{{ $j }}][stop_name]" value="{{ $stop->stop_name }}" class="form-control me-2" placeholder="Stop Name">
                                <input type="time" name="segments[{{ $i }}][stops][{{ $j }}][arrival_time]" value="{{ $stop->arrival_time }}" class="form-control me-2">
                                <input type="time" name="segments[{{ $i }}][stops][{{ $j }}][departure_time]" value="{{ $stop->departure_time }}" class="form-control me-2">
                                <button type="button" class="btn btn-danger remove-stop">Remove</button>
                            </div>
                            @endforeach
                        </div>
                        <button type="button" class="btn btn-sm btn-primary add-stop">+ Add Stop</button>
                    </div>

                    <div class="col-md-12 mt-2">
                        <button type="button" class="btn btn-sm btn-danger remove-segment">Remove Segment</button>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="mb-3">
                <button type="button" class="btn btn-sm btn-primary" id="add-segment">+ Add Segment</button>
            </div>

            <hr>

            {{-- ================= Prices ================= --}}
            <h5>Boarding Point Prices</h5>
            <div id="prices-wrapper">
                @foreach($package->prices as $pIndex => $price)
                <div class="row price-row mb-2">
                    <div class="col-md-5">
                        <label>Start Point</label>
                        <select name="prices[{{ $pIndex }}][start_point_id]" class="form-control" required>
                            @foreach($startingPoints as $sp)
                                <option value="{{ $sp->id }}" {{ $price->start_point_id == $sp->id ? 'selected' : '' }}>{{ $sp->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label>Bus Type</label>
                        <select name="prices[{{ $pIndex }}][bus_type_id]" class="form-control" required>
                            @foreach($busTypes as $busType)
                                <option value="{{ $busType->id }}" {{ $price->bus_type_id == $busType->id ? 'selected' : '' }}>{{ $busType->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label>Price</label>
                        <input type="number" step="0.01" name="prices[{{ $pIndex }}][price]" value="{{ $price->price }}" class="form-control" required>
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                        <button type="button" class="btn btn-sm btn-danger remove-price">Remove</button>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="mb-3">
                <button type="button" class="btn btn-sm btn-primary" id="add-price">+ Add Price</button>
            </div>

            <hr>

            <button type="submit" class="btn btn-success">Update Package</button>
        </form>
    </div>
</div>

{{-- ================= JS ================= --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const fromOptionsHtml = `{!! collect($startingPoints)->map(fn($sp) => "<option value={$sp->id}>{$sp->name}</option>")->join('') !!}`;
    const toOptionsHtml   = `{!! collect($destinations)->map(fn($d) => "<option value={$d->id}>{$d->name}</option>")->join('') !!}`;
    const busTypeOptionsHtml = `{!! collect($busTypes)->map(fn($b) => "<option value={$b->id}>{$b->name}</option>")->join('') !!}`;

    let segmentIndex = {{ $package->segments->count() }};
    let priceIndex = {{ $package->prices->count() }};

    const segWrapper = document.getElementById('segments-wrapper');
    const addSegBtn = document.getElementById('add-segment');

    const priceWrapper = document.getElementById('prices-wrapper');
    const addPriceBtn = document.getElementById('add-price');

    // Add Segment
    addSegBtn.addEventListener('click', function () {
        const html = `
        <div class="row segment-row mb-2">
            <div class="col-md-1">
                <label>Day</label>
                <input type="number" name="segments[${segmentIndex}][day_number]" class="form-control" min="1" required>
            </div>
            <div class="col-md-3">
                <label>From (Starting Point)</label>
                <select name="segments[${segmentIndex}][from_location_id]" class="form-control" required>${fromOptionsHtml}</select>
            </div>
            <div class="col-md-3">
                <label>To (Destination)</label>
                <select name="segments[${segmentIndex}][to_location_id]" class="form-control" required>${toOptionsHtml}</select>
            </div>
            <div class="col-md-2">
                <label>Departure</label>
                <input type="time" name="segments[${segmentIndex}][departure_time]" class="form-control" required>
            </div>
            <div class="col-md-2">
                <label>Arrival</label>
                <input type="time" name="segments[${segmentIndex}][arrival_time]" class="form-control" required>
            </div>
            <div class="col-md-1">
                <label>Halt</label>
                <select name="segments[${segmentIndex}][halt]" class="form-control"><option value="0">No</option><option value="1">Yes</option></select>
            </div>
            <div class="col-md-12 mt-2 stops">
                <h6>Stops</h6>
                <div class="stop-wrapper"></div>
                <button type="button" class="btn btn-sm btn-primary add-stop">+ Add Stop</button>
            </div>
            <div class="col-md-12 mt-2">
                <button type="button" class="btn btn-sm btn-danger remove-segment">Remove Segment</button>
            </div>
        </div>`;
        segWrapper.insertAdjacentHTML('beforeend', html);
        segmentIndex++;
    });

    // Segment & Stop Actions
    segWrapper.addEventListener('click', function(e) {
        // Remove Segment
        if (e.target.classList.contains('remove-segment')) e.target.closest('.segment-row').remove();

        // Remove Stop
        if (e.target.classList.contains('remove-stop')) e.target.closest('.stop-row').remove();

        // Add Stop
        if (e.target.classList.contains('add-stop')) {
            const stopsDiv = e.target.closest('.stops');
            const stopWrapper = stopsDiv.querySelector('.stop-wrapper');
            const segmentRow = e.target.closest('.segment-row');
            const segmentIndex = Array.from(segWrapper.querySelectorAll('.segment-row')).indexOf(segmentRow);
            const stopIndex = stopWrapper.querySelectorAll('.stop-row').length;

            const html = `
            <div class="stop-row mb-2 d-flex">
                <input type="text" name="segments[${segmentIndex}][stops][${stopIndex}][stop_name]" class="form-control me-2" placeholder="Stop Name">
                <input type="time" name="segments[${segmentIndex}][stops][${stopIndex}][arrival_time]" class="form-control me-2">
                <input type="time" name="segments[${segmentIndex}][stops][${stopIndex}][departure_time]" class="form-control me-2">
                <button type="button" class="btn btn-danger remove-stop">Remove</button>
            </div>`;
            stopWrapper.insertAdjacentHTML('beforeend', html);
        }
    });

    // Add Price
    addPriceBtn.addEventListener('click', function() {
        const html = `
        <div class="row price-row mb-2">
            <div class="col-md-5">
                <label>Start Point</label>
                <select name="prices[${priceIndex}][start_point_id]" class="form-control" required>${fromOptionsHtml}</select>
            </div>
            <div class="col-md-4">
                <label>Bus Type</label>
                <select name="prices[${priceIndex}][bus_type_id]" class="form-control" required>${busTypeOptionsHtml}</select>
            </div>
            <div class="col-md-2">
                <label>Price</label>
                <input type="number" step="0.01" name="prices[${priceIndex}][price]" class="form-control" required>
            </div>
            <div class="col-md-1 d-flex align-items-end">
                <button type="button" class="btn btn-sm btn-danger remove-price">Remove</button>
            </div>
        </div>`;
        priceWrapper.insertAdjacentHTML('beforeend', html);
        priceIndex++;
    });

    // Remove Price
    priceWrapper.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-price')) e.target.closest('.price-row').remove();
    });
});
</script>
@endsection