@extends('layouts.app_new')
@section('title','Prices')

@section('content')
<div class="row flex-fill justify-content-center align-items-center ">
    <div class="col-md-5 col-sm-12">
        <div class="card shadow-lg">
            <div class="card-body bg-primary text-white">
                <h2 class="text-white card-title my-2 ms-2">
                    {{$type}}
                </h2>
                <hr class="w-100 mb-4">
                <form id="order_form">
                    @csrf
                    @method('post')

                    <label class="form-label">{{__("Full Name")}}</label>
                    <input id="full_name" type="text" class="form-control" name="full_name" required>
                    <span class="text-danger" id="full_nameError"></span>
                    <br>
                    <label class="form-label">{{__("Email")}}</label>
                    <input id="email" type="text" class="form-control" name="email">
                    <span class="text-danger" id="emailError"></span>
                    <br>
                    <label class="form-label">{{__("Phone")}}</label>
                    <input id="phone" type="text" class="form-control" name="phone">
                    <span class="text-danger" id="phoneError"></span>
                    <br>
                    <div hidden id="hidden_inputs">
                        <input type="text" name="policy_type" value="{{$type}}">
                        <span class="text-danger" id="policy_typeError"></span>
                        <input type="text" name="price" value="{{$price}}">
                        <span class="text-danger" id="priceError"></span>
                        <input type="text" name="travelers_count" value="{{$count}}">
                        <span class="text-danger" id="travelers_countError"></span>
                    </div>
                    <button id="btnSave" type="button"  class="btn btn-light my-2 float-end">{{__('Save')}}</button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-5 px-4">
        <div class="card border border-2 border-primary shadow">
          <div class="card-body text-end">
            <h4 id="title" class="card-title text-center text-primary"></h4>
            <p class="text-center text-primary fs-5 mb-4" id='success'>
                {{__('Search and Compare Travel Insurance Quotes to find the best travel insurance policy for your trip.')}}
            </p>
          </div>
        </div>
    </div>
</div>
{{--
<div class="row my-2 mt-2">
    <div class="col text-end">
        <button class="btn btn-outline-primary shadow-lg mx-1" type="button">{{__('Home Page')}}</button>
        <button class="btn btn-primary shadow-lg mx-1" type="button">{{__('New Enquiry')}}</button>
    </div>
</div> --}}
@endsection

@section('script')
<script>
$('#btnSave').click(function(e){
    e.preventDefault();
    form =$('#order_form');
    $.ajax({
        type: "POST",
        url: "{{route('orders.store')}}",
        data:{
            full_name:$("input[name=full_name]").val(),
            email:$("input[name=email]").val(),
            phone:$("input[name=phone]").val(),
            policy_type:$("input[name=policy_type]").val(),
            price:$("input[name=price]").val(),
            travelers_count:$("input[name=travelers_count]").val(),
            _token:$('meta[name="csrf-token"]').attr('content'),
        },
        success:function(response){
            if(response) {
                $('#title').html('{{__("Thank you!")}}');
                $('#title').after(`<hr>`);
                $('#success').html(' {{__("We will contact you as soon as possible")}}<span class = "mx-2 floate-end"> <i class="zmdi zmdi-flower-alt mdc-text-light-blue"></i></span>');
                $('#success').after('<a class="btn btn-outline-primary shadow-lg mx-1" href="{{route("base")}}">{{__("Home Page")}}</a> <a class="btn btn-outline-primary shadow-lg mx-1" href="{{route("pricing.enquiry")}}">{{__("New Enquiry")}}</button>')
                form.find('span').empty();
                form.find('.is-invalid').removeClass('is-invalid');
                form.find('input').attr('disabled','true');
                $('#btnSave').attr('disabled','true');
                $('#btnSave').addClass('disabled');
                // form.trigger('reset');
            }
        },
        error: function(response) {
            console.log(response.responseJSON.errors);
            let errors = response.responseJSON.errors;
            for(error in errors ) {
                console.log(error);
                $('#'+error).addClass('is-invalid');
                $('#'+error+'Error').text(errors[error]);
            }
        }
    });
});
</script>
@endsection