@extends('layouts.web')

@section('content')
<section class="intenal-heading">
    <div class="container">
        <div class="col-12">
            <h2>Appointment</h2>
            <a href="{{ route('homepage') }}">Home</a>> <span>Appointment</span>
        </div>
    </div>
</section>

<section class="contact-page-main">
    <div class="container">
        <form action="{{ route('submitBillingDetail') }}" method="get">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            Billing Details
                        </div>
                        <div class="card-body ">

                            @csrf
                            <div class="row">
                                <div class="col-md-4 col-sm-4 col-12 mb-2">
                                    <label for="" class="form-label">First Name<span class="red-star">*</span></label>
                                    <input type="text" class="form-control" name="first_name" value="{{ old('first_name') }}">
                                </div>
                                <div class="col-md-4 col-sm-4 col-12 mb-2">
                                    <label for="" class="form-label">Last Name<span class="red-star">*</span></label>
                                    <input type="text" class="form-control" name="last_name" value="{{ old('last_name') }}">
                                </div>
                                <div class="col-md-4 col-sm-4 col-12 mb-2">
                                    <label for="" class="form-label">Email<span class="red-star">*</span></label>
                                    <input type="text" class="form-control" name="email" value="{{ old('email') }}">
                                </div>
                                <div class="col-md-4 col-sm-4 col-12 mb-2">
                                    <label for="" class="form-label">Phone<span class="red-star">*</span></label>
                                    <input type="text" class="form-control" name="phone" value="{{ old('phone') }}">
                                </div>

                                <div class="col-md-4 col-sm-4 col-12 mb-2">
                                    <label for="" class="form-label">Postcode<span class="red-star">*</span></label>
                                    <input type="text" class="form-control" name="postcode" value="{{ old('postcode') }}">
                                </div>

                                <div class="col-md-4 col-sm-4 col-12 mb-2">
                                    <label for="" class="form-label">Address<span class="red-star">*</span></label>
                                    <textarea type="text" class="form-control" name="address">{!! old('address') !!}</textarea>
                                </div>

                                <div class="col-md-4 col-sm-4 col-12 mb-2">
                                    @if(isset($record->country_id))
                                    @php $country_id=$record->country_id @endphp
                                    @elseif(old('country_id'))
                                    @php $country_id=old('country_id'); @endphp
                                    @else
                                    @php $country_id=0; @endphp
                                    @endif
                                    <label class="form-label">Country</label>
                                    <select class="form-control" name="country_id" id="country_id">
                                        <option value="">-- Select --</option>
                                        @foreach($countries as $country)
                                        <option value="{{ $country->id }}" {!! ($country_id==$country->id) ? 'selected' : '' !!}>{{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-4 col-sm-4 col-12 mb-2">
                                    <label class="form-label">State</label>
                                    <select class="form-control" name="state_id" id="state_id">
                                        <option value="">-- Select --</option>
                                        @isset($state)
                                        <option selected value="{{ $state->id }}">{{ $state->name }}</option>
                                        @endisset
                                    </select>
                                </div>

                                <div class="col-md-4 col-sm-4 col-12 mb-2">
                                    <label class="form-label">City</label>
                                    <select class="form-control" name="city_id" id="city_id">
                                        <option value="">-- Select --</option>
                                        @isset($city)
                                        <option selected value="{{ $city->id }}">{{ $city->name }}</option>
                                        @endisset
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 mt-4 text-right">
                    <button type="submit" class="btn book-next">Proceed to checkout</button>
                </div>
            </div>
        </form>
    </div>
</section>
@endsection
@push('scripts')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<script>
    $(document).ready(function() {
        // select countries
        $("#country_id").select2({
            ajax: {
                url: "{{ route('getCountries') }}",
                type: "get",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        searchTerm: params.term // search term

                    };
                },
                processResults: function(response) {
                    return {
                        results: response

                    };
                },
                cache: true
            }
        });

        // select states
        $("#state_id").select2({
            ajax: {
                url: "{{ route('getStates') }}",
                type: "get",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    country_id = $("#country_id").val();
                    return {
                        searchTerm: params.term, // search term
                        country_id: country_id
                    };
                },
                processResults: function(response) {
                    return {
                        results: response

                    };
                },
                cache: true
            }
        });

        // select cities
        $("#city_id").select2({
            ajax: {
                url: "{{ route('getCities') }}",
                type: "get",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    state_id = $("#state_id").val();
                    return {
                        searchTerm: params.term, // search term
                        state_id: state_id
                    };
                },
                processResults: function(response) {
                    return {
                        results: response

                    };
                },
                cache: true
            }
        });
    });
</script>
@endpush