@extends('Dashboard.layouts.master')
@section('title', 'Orders | Create')
@section('css')
@endsection
@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <div class="d-flex flex-column flex-column-fluid">
            <livewire:bread-crumb heading="{{__('translations.orders')}}" url_1="{{Helper::handle_route('dashboard')}}"
                                  name_1="Home"
                                  url_2="{{Helper::handle_route('orders.index')}}"
                                  name_2="{{__('translations.orders')}}" name_3="{{__('forms.create')}}"/>

            <div id="kt_app_content" class="app-content flex-column-fluid">
                <!--begin::Content container-->
                <div id="kt_app_content_container" class="app-container container-xxl">

                    <div class="card">
                        <form action="{{Helper::handle_route('orders.store')}}" method="POST" class="form">
                            @csrf

                            <div class="card-body">
                                @php $user_id = request()->get('id') @endphp

                                <input type="hidden" name="user_id" value="{{$user_id}}">

                                <div class="mb-4">
                                    <label>Select Experience <span class="text-danger">*</span></label>
                                    <select class="form-control @error('experience') border-danger @enderror"
                                            name="experience" id="experience">
                                        <option
                                            value="">
                                            Select Experience
                                        </option>
                                        @foreach($experiences as $experience)
                                            <option
                                                value="{{$experience->id}}" {{old('experience') == $experience->id ? 'selected' : ''}}>
                                                {{$experience->title}}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('experience')
                                    <span class="text-danger"> {{ $errors->first('experience') }} </span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label>Select Experience <span class="text-danger">*</span></label>
                                    <select class="form-control @error('featureId') border-danger @enderror"
                                            name="featureId" id="featureId">
                                        <option data-price="0.0" value="">Select Package</option>
                                    </select>
                                    @error('featureId')
                                    <span class="text-danger"> {{ $errors->first('featureId') }} </span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <div class="mb-4">
                                        <label>Number of Person: </label>
                                        <select class="form-control  @error('nbOfSeats') border-danger @enderror"
                                                name="nbOfSeats" id="nbOfSeats">
                                            @for($i=1 ; $i<15 ; $i++)
                                                <option value="{{$i}}">{{$i}}</option>
                                            @endfor
                                        </select>
                                        @error('nbOfSeats')
                                        <span class="text-danger"> {{ $errors->first('nbOfSeats') }} </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="mb-4 d-inline-block">
                                    <label>Total Amount: </label>
                                    <input type="text" readonly name="amount" id="amount"
                                           class="form-control  @error('amount') border-danger @enderror"
                                           value="0.0">
                                    @error('amount')
                                    <span class="text-danger"> {{ $errors->first('amount') }} </span>
                                    @enderror
                                </div>

                            </div>
                            <div class="card-footer">
                                <input type="submit" value="{{__('forms.create')}}" class="btn btn-primary">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function () {

            const $experience = $('#experience :selected').val();
            getPackages($experience);

            let oldPrice;

            $('#experience').change(function () {
                // Get the selected option value
                var selectedValue = $(this).val();
                getPackages(selectedValue);
            });


            function getPackages(experienceId) {
                $.ajax({
                    url: '{{ route('experience.packages', '__ID__') }}'.replace('__ID__', experienceId),
                    type: 'GET', // Adjust the HTTP method if needed
                    success: function (response) {
                        $('#featureId').empty();
                        $('#featureId').append('<option data-price="0.0" value="">Select Package</option>');
                        // Handle the successful response
                        const data = response.data;
                        $.each(data, function (index, option) {
                            $('#featureId').append('<option data-price="' + option.finalPrice + '" value="' + option.id + '">' + option.title + '</option>');
                        });
                    },
                    error: function (error) {
                        // Handle errors
                        console.error('Error:', error);
                    }
                });
            }

            $('#featureId').change(function () {
                var selectedOption = $('option:selected', this);

                var price = selectedOption.data('price');

                oldPrice = price;
                $("#amount").val(price);
            });

            $('#nbOfSeats').change(function () {
                var selectedOption = $('option:selected', this).val();

                var value = selectedOption <= 0 ? 1 : $(this).val();

                var old_amount = $("#amount").val() ?? 0;
                var new_amount = value * oldPrice;
                $('#amount').val(new_amount);
            });

        });
    </script>
@endsection