@extends('front.master')



@section('content')

<div class="container py-3">

    <div class="text-center bg-primary">

        <h2 class=" text-white">Payment</h2>

    </div>

<form action="{{ url('/pay') }}" method="POST" class="needs-validation">

    <div class="row py-3">

        <div class="col-md-4 order-md-3 mb-4">

            <h4 class="d-flex justify-content-between align-items-center mb-3">

                <span class="text-muted">Payment details</span>

            </h4>

            <ul class="list-group mb-3">

                <li class="list-group-item d-flex justify-content-between lh-condensed">

                    <div>

                        <h6 class="my-0 text-capitalize">{{ $response->visa->name }}</h6>

                    </div>

                </li>

                <li class="list-group-item d-flex justify-content-between lh-condensed">

                    <div>

                        <h6 class="my-0">Government Fee</h6>

                    </div>

                    <span class="text-muted">USD {{ $response->visa->gov_fee }}</span>

                </li>

                <li class="list-group-item d-flex justify-content-between lh-condensed">

                    <div>

                        <h6 class="my-0">{{ $response->estimate->estimate->name }}</h6>

                    </div>

                    <span class="text-muted">USD {{ $response->estimate->price }}</span>

                </li>

                <li class="list-group-item d-flex justify-content-between">

                    <span>Total (USD)</span>

                    <strong>USD {{  $response->estimate->price + $response->visa->gov_fee}}</strong><input type="hidden" value="{{  $response->estimate->price + $response->visa->gov_fee}}" name="total">

                </li>

            </ul>

        </div>

        

        <div class="col-md-6 order-md-1">

            <div class="card">

                <div class="card-body">

                <input type="hidden" value="{{ csrf_token() }}" name="_token" />

                <input type="hidden" name="response-id" value="{{ encrypt($response->id) }}">

                <div class="row">

                    <div class="col-md-12 mb-3">

                        <label for="firstName">Full name</label>

                        <input type="text" name="customer_name" class="form-control" id="customer_name" placeholder=""

                               value="{{ $response->first_name }} {{ $response->last_name }}" required>

                        <div class="invalid-feedback">

                            Valid customer name is required.

                        </div>

                    </div>

                </div>



                <div class="mb-3">

                    <label for="mobile">Mobile</label>

                    <div class="input-group">

                        <div class="input-group-prepend">

                            <span class="input-group-text">+88</span>

                        </div>

                        <input type="text" name="customer_mobile" class="form-control" id="mobile" placeholder="Mobile"

                               value="01711xxxxxx" required>

                        <div class="invalid-feedback" style="width: 100%;">

                            Your Mobile number is required.

                        </div>

                    </div>

                </div>



                <div class="mb-3">

                    <label for="email">Email</label>

                    <input type="email" name="email" class="form-control" id="email"

                           placeholder="you@example.com" value="{{ $response->email }}" required>

                    <div class="invalid-feedback">

                        Please enter a valid email address for shipping updates.

                    </div>

                </div>



                <div class="mb-3">

                    <label for="address">Address</label>

                    <input type="text" class="form-control" id="address" placeholder="1234 Main St"

                           name="address" required>

                    <div class="invalid-feedback">

                        Please enter your shipping address.

                    </div>

                </div>



                <div class="mb-3">

                    <label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>

                    <input name="address2" type="text" class="form-control" id="address2" placeholder="Apartment or suite">

                </div>



                <div class="row">

                    <div class="col-md-5 mb-3">

                        <label for="country">Country</label>

                        <select class="custom-select d-block w-100" id="country" required>

                            <option value="{{ $response->nationality }}">{{ $response->nationality }}</option>

                        </select>

                        <div class="invalid-feedback">

                            Please select a valid country.

                        </div>

                    </div>

                    <div class="col-md-4 mb-3">

                        <label for="state">State</label>

                        <select class="custom-select d-block w-100" id="state" required>

                            <option value="">Choose...</option>

                            <option value="Dhaka">Dhaka</option>

                        </select>

                        <div class="invalid-feedback">

                            Please provide a valid state.

                        </div>

                    </div>

                    <div class="col-md-3 mb-3">

                        <label for="zip">Zip</label>

                        <input type="text" class="form-control" id="zip" placeholder="" required>

                        <div class="invalid-feedback">

                            Zip code required.

                        </div>

                    </div>

                </div>

                <button class="btn btn-primary btn-lg btn-block" type="submit">Pay Now</button>

          

                </div>

            </div>

        </div>

        <div class="col-md-2 order-md-2"></div>

    </div>

</form>

</div>

@endsection