@extends('admin.layouts.master')

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

@section('content')
<div class="card">
    <div class="card-header">
        <h4>Create New Package</h4>
    </div>
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="card-body">
        <form action="{{ route('admin.packages.store') }}" method="POST">
            @csrf

            {{-- ================= 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" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <label>Available From</label>
                    <input type="date" name="available_from" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <label>Available To</label>
                    <input type="date" name="available_to" 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 }}">{{ $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">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
                <div class="col-md-12 mt-2">
                    <label>Description</label>
                    <textarea name="description" class="form-control"></textarea>
                </div>
            </div>

            <hr>

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

                    {{-- Stops for this segment --}}
                    <div class="col-md-12 mt-2 stops">
                        <h6>Stops</h6>
                        <div class="stop-wrapper">
                            <div class="stop-row mb-2 d-flex">
                                <input type="text" name="segments[0][stops][0][stop_name]" class="form-control me-2" placeholder="Stop Name">
                                <input type="time" name="segments[0][stops][0][arrival_time]" class="form-control me-2">
                                <input type="time" name="segments[0][stops][0][departure_time]" class="form-control me-2">
                                <button type="button" class="btn btn-danger remove-stop">Remove</button>
                            </div>
                        </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>
            </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">
                <div class="row price-row mb-2">
                    <div class="col-md-5">
                        <label>Start Point</label>
                        <select name="prices[0][start_point_id]" class="form-control" required>
                            @foreach($startingPoints as $sp)
                                <option value="{{ $sp->id }}">{{ $sp->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label>Bus Type</label>
                        <select name="prices[0][bus_type_id]" class="form-control" required>
                            @foreach($busTypes as $busType)
                                <option value="{{ $busType->id }}">{{ $busType->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label>Price</label>
                        <input type="number" step="0.01" name="prices[0][price]" class="form-control" required>
                    </div>
                    <div class="col-md-1 d-flex align-items-end">
                        <!-- placeholder -->
                    </div>
                </div>
            </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">Save 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 = 1;
    let priceIndex = 1;

    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 class="stop-row mb-2 d-flex">
                        <input type="text" name="segments[${segmentIndex}][stops][0][stop_name]" class="form-control me-2" placeholder="Stop Name">
                        <input type="time" name="segments[${segmentIndex}][stops][0][arrival_time]" class="form-control me-2">
                        <input type="time" name="segments[${segmentIndex}][stops][0][departure_time]" class="form-control me-2">
                        <button type="button" class="btn btn-danger remove-stop">Remove</button>
                    </div>
                </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++;
    });

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

        // Remove stop
        if (e.target && e.target.classList.contains('remove-stop')) {
            const stopRow = e.target.closest('.stop-row');
            if (stopRow) stopRow.remove();
        }

        // Add stop
        if (e.target && 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++;
    });

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