@extends('layout.admin')

@section('styles')

@endsection

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="py-3 mb-2">
            <span class="text-muted fw-light">Fare /</span> Edit
        </h4>
        <div class="row mb-2">
            <div class="col-lg-12">
                <a href="{{ route('listFare') }}" class="btn btn-primary float-end">Back</a>
            </div>
        </div>
        <div class="row">
            <!-- FormValidation -->
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <form role="form" action="{{ route('updateFare') }}" class="row g-3 fv-plugins-bootstrap5 fv-plugins-framework ajax-form-admin" method="post" enctype="multipart/form-data">
                            {{csrf_field()}}
                              <div class="col-sm-12 col-md-12 col-lg-12 fv-plugins-icon-container">
                                <label class="form-label">Airline <span class="steric">*</span></label>
                                <div class="position-relative">
                                    <input type="text" name="airline" id="airline"
                                        class="form-control {{ $errors->has('airline') ? ' is-invalid' : '' }}"
                                        placeholder="Airline Name" autocomplete="off"
                                        value="{{ old('airline', $airlineTitle ?? '') }}">

                                    <input type="hidden" name="airline_id" id="airline_id" value="{{ old('airline_id', $fare->airline_id ?? '') }}">

                                    <ul id="airlineSuggestions" class="list-group position-absolute w-100" style="z-index: 1000; display: none; top: 100%; left: 0;"></ul>
                                </div>

                                @if ($errors->has('airline'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('airline') }}</strong>
                                    </span>
                                @endif
                            </div>

                         
                           <div class="col-sm-12 col-md-12 col-lg-12 fv-plugins-icon-container">
                            <label class="form-label">Origin</label>

                            <!-- Wrapper to control dropdown width and position -->
                            <div class="position-relative">
                                <input type="text" name="origin" id="origin"
                                    class="form-control {{ $errors->has('origin') ? ' is-invalid' : '' }}"
                                    placeholder="Departure Airport" autocomplete="off"
                                    value="{{ $fare->origin ??  old('origin') }}">

                                <!-- Suggestion list -->
                                <ul id="originSuggestions" class="list-group position-absolute w-100"
                                    style="z-index: 1000; display: none; top: 100%; left: 0; background-color: white; max-height: 300px; overflow-y: auto; border: 1px solid #ddd; color: #000;">
                                </ul>
                            </div>

                            @if ($errors->has('origin'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('origin') }}</strong>
                                </span>
                            @endif
                        </div> 
                        <div class="col-sm-12 col-md-12 col-lg-12 fv-plugins-icon-container">
                            <label class="form-label">Destination</label>

                            <!-- Wrapper to control position -->
                            <div class="position-relative">
                                <input type="text" name="destination" id="destination"
                                    class="form-control {{ $errors->has('destination') ? ' is-invalid' : '' }}"
                                    placeholder="Destination Airport" autocomplete="off"
                                    value="{{ $fare->destination ?? old('destination') }}">

                                <!-- Suggestion list -->
                                <ul id="destinationSuggestions" class="list-group position-absolute w-100"
                                    style="z-index: 1000; display: none; top: 100%; left: 0;"></ul>
                            </div>

                            @if ($errors->has('destination'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('destination') }}</strong>
                                </span>
                            @endif
                        </div>
                            <div class="col-sm-12 col-md-12 col-lg-12 fv-plugins-icon-container">
                                <label class="form-label">Price</label>
                                <input  type="number" name="price" id="price"
                                       class="form-control {{ $errors->has('price') ? ' is-invalid' : '' }}"
                                       placeholder="Enter Price" value="{{$fare->price ?? old('price') }}">
                                @if ($errors->has('price'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('price') }}</strong>
                                    </span>
                                @endif
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-12 fv-plugins-icon-container">
                                <label class="form-label">Fare Price Type</label>
                                <select id="fare_price_type" class="form-control select2 form-select" name="fare_price_type" data-select2-id="fare_price_type" tabindex="-1" aria-hidden="true">        										
                                    <option value="0"{{ old('fare_price_type', $fare->fare_price_type ?? '') == '0' ? 'selected' : '' }}>Business</option>
                                    <option value="1" {{ old('fare_price_type', $fare->fare_price_type ?? '') == '1' ? 'selected' : '' }}>Economy</option>
                                </select>
                                @if ($errors->has('fare_price_type'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('fare_price_type') }}</strong>
                                    </span>
                                @endif
                            </div>
                            <div class="col-sm-12 col-md-12 col-lg-12 fv-plugins-icon-container">
                                <label class="form-label">Way</label>
                                <select id="way" class="form-control select2 form-select" name="way" data-select2-id="way" tabindex="-1" aria-hidden="true">        										
                                    <option value="0" {{ old('line_type', $fare->line_type ?? '') == '0' ? 'selected' : '' }}>One Way</option>
                                    <option value="1" {{ old('line_type', $fare->line_type ?? '') == '1' ? 'selected' : '' }}>Return</option>
                                </select>
                                @if ($errors->has('way'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('way') }}</strong>
                                    </span>
                                @endif
                            </div>
                            
                           
                            <div class="col-sm-12 col-md-12 col-lg-12 fv-plugins-icon-container">
                                <label class="form-label">Status</label>
                                <div>
                                    @if ($fare->status == 0)
                                        <input name="is_active" type="checkbox" class="" data-toggle="toggle">
                                        <input type="hidden" name="is_active" id="is_active" value="{{$fare->status}}">
                                    @else
                                        <input name="is_active" type="checkbox" class="" checked data-toggle="toggle">
                                        <input type="hidden" name="is_active" id="is_active" value="{{$fare->status}}">
                                    @endif
                                </div>
                            </div>
                            <div class="col-12">
                                <input type="hidden" name="fare_id" value="{{$fare->id}}" />
                                <button type="submit" class="btn btn-primary">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- /FormValidation -->
        </div>

    </div>
@endsection
@section('script')
    <script>
        $('input[name="is_active"]').change(function() {
            if ($(this).is(":checked")) {
                $('input#is_active').val('1');
            } else {
                $('input#is_active').val('0');
            }
        });
    </script>
    <script>
$(document).ready(function () {
    $('#airline').on('input', function () {
        let query = $(this).val();
        const $list = $('#airlineSuggestions');
        const $input = $('#airline');

        if (query.length < 2) {
            $list.hide();
            $input.removeClass('input-loading');
            return;
        }

        // Show loader in input
        $input.addClass('input-loading');

        $.ajax({
            url: '/fare/get-airlines',
            method: 'GET',
            data: { search: query },
            success: function (response) {
                $input.removeClass('input-loading');
                $list.empty();

                if (response.length) {
                    response.forEach(item => {
                        $list.append(`<li class="list-group-item airline-option" data-id="${item.id}" style="cursor:pointer;">${item.title}</li>`);
                    });
                    $list.show();
                } else {
                    $list.html('<li class="list-group-item text-center text-muted">No results found</li>').show();
                }
            },
            error: function () {
                $input.removeClass('input-loading');
                $list.html('<li class="list-group-item text-danger text-center">Error loading data</li>').show();
            }
        });
    });

    $(document).on('click', '.airline-option', function () {
        $('#airline').val($(this).text());
        $('#airline_id').val($(this).data('id'));
        $('#airlineSuggestions').hide();
    });

    $(document).on('click', function (e) {
        if (!$(e.target).closest('#airline').length) {
            $('#airlineSuggestions').hide();
        }
    });
});
</script>
@endsection