@extends('admin.layouts.master')

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

@section('content')
<div class="card">
    <div class="card-header">
        <h4>Create New Package</h4>
    </div>
    <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>
                </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 for remove button alignment -->
                    </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>

{{-- Inline script placed after DOM elements to guarantee it runs --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Pre-rendered option HTML for selects (server-side rendered once, reused)
    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; // next index for segments (0 already used)
    let priceIndex = 1;   // next index for prices (0 already used)

    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">
                <button type="button" class="btn btn-sm btn-danger remove-segment">Remove Segment</button>
            </div>
        </div>
        `;
        segWrapper.insertAdjacentHTML('beforeend', html);
        segmentIndex++;
    });

    // Delegate remove for segments
    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();
        }
    });

    // 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 for prices
    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();
        }
    });

    // Defensive: log any JS errors to console (helpful during debugging)
    window.addEventListener('error', function (evt) {
        console.error('JS error:', evt.error || evt.message);
    });
});
</script>

@endsection