@extends('site.layouts.app')
@section('title', 'Possport /Nicop')
<style>
    label {
        font-weight: bold
    }
</style>
@section('content')
    <!-- START SECTION BREADCRUMB -->
    <div class="breadcrumb_section bg_gray page-title-mini">
        <div class="container">
            <!-- STRART CONTAINER -->
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="page-title">
                        <h1>Possport /Nicop</h1>
                    </div>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb justify-content-md-end">
                        <li class="breadcrumb-item"><a href="/">Home</a></li>
                        <li class="breadcrumb-item active">Possport /Nicop</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- END CONTAINER-->
    </div>
    <!-- END SECTION BREADCRUMB -->

    <!-- START MAIN CONTENT -->
    <div class="main_content">
        <div class="section">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <div class="card shadow border-0">
                            <div class="card-body">

                                <form method="post">
                                    @csrf
                                    <div class="row">
                                        <div class="form-group col-md-12 mb-3">
                                            <label for="">Required Country</label>

                                            <select class="form-select first_null text-capitalize select2" required
                                                name="country_id" id="country">
                                                <option value="">Select country</option>
                                                @foreach ($countries as $key => $country)
                                                    @php
                                                        $country = App\Models\Country::where('id', $country)->first();
                                                    @endphp
                                                    <option data-currency="{{ $country->currency }}"
                                                        value="{{ $country->id }}"> {{ str_replace('_', '',$country->name ) }}</option>
                                                @endforeach

                                            </select>
                                        </div>

                                        <div class="form-group col-md-6 mb-3">
                                            <label for="">Choose Category</label>
                                            <select class="form-select first_null text-capitalize " required
                                                name="passportnicop_category" id="categories">

                                            </select>
                                        </div>


                                        <div class="form-group col-md-6 mb-3">
                                            <label for="">Choose Plan</label>
                                            <select class="form-select first_null text-capitalize " required
                                                name="passportnicop_plan" id="plans">

                                            </select>
                                        </div>

                                        <div class="form-group col-md-6 mb-3">
                                            <label for="">Cost</label>
                                            <input type="text" id="_fee" readonly class="form-control">
                                            <input type="hidden" name="cost" id="cost" class="form-control">
                                        </div>
                                        <div class="row">
                                            <div class="form-group col-md-6 mb-3">
                                                <button type="submit" class="btn btn-fill-out btn_save">Proceed Now</button>
                                            </div>

                                        </div>


                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>

    <script>
        $('#country').on('change', function() {
            var country_id = $(this).val();
            $('#categories').empty();
            if (country_id) {
                $.ajax({
                    url: '{{ route('country.passportnicop_categories') }}',
                    method: 'GET',
                    data: {
                        country_id: country_id
                    },
                    success: function(data) {
                        console.log(data)
                        $('#categories').empty().append(
                            '<option value="">Select Catgory</option>');
                        $.each(data, function(key, category) {
                            $('#categories').append('<option  value="' + category.id + '">' +
                                category.name + '</option>');
                        });
                    }
                });
            } else {
                $('#categories').empty().append('<option value="">Select Catgory</option>');
            }
        });

        $('#categories').on('change', function() {
            var category_id = $(this).val();
            $('#plans').empty();
            if (category_id) {
                $.ajax({
                    url: '{{ route('country.passportnicop_byCategory') }}',
                    method: 'GET',
                    data: {
                        category_id: category_id
                    },
                    success: function(data) {
                        console.log(data)
                        $('#plans').empty().append(
                            '<option value="">Select Plan</option>');
                        $.each(data, function(key, plan) {
                            $('#plans').append('<option data-price="' + plan.price +
                                '" value="' + plan.id + '">' +
                                plan.title + '</option>'
                            );


                        });
                    }
                });
            } else {
                $('#plans').empty().append('<option value="">Select Plan</option>');
            }
        });



        function exchange_rate(to, amount) {
            return new Promise(function(resolve, reject) {
                $.ajax({
                    type: "get",
                    url: "/currency_exchange",
                    data: {
                        'to': to,
                        'amount': amount
                    },
                    dataType: "json",
                }).done(function(response) {
                    resolve(response.result);
                }).fail(function(response) {
                    reject('Currency exchange request failed');
                });
            });
        }

        $('#plans').change(function() {
            var country_curr = "{{ auth()->user()->country->currency }}";
            var selectedOption = $(this).find('option:selected');
            var price = selectedOption.data('price');

            // Show loading message
            $('#_fee').val('Loading...');

            exchange_rate(country_curr, price)
                .then(function(price_result) {
                    console.log('Exchange Rate Result:', price_result);
                    country_curr = country_curr.replace('_', '');
                    $('#_fee').val(country_curr + ' ' + price_result);

                    $('#cost').val(price_result);
                })
                .catch(function(error) {
                    // Handle errors
                    toastr.error(error);
                    console.error('Exchange Rate Error:', error);

                    // Clear the loading message in case of an error
                    $('#_fee').val('');
                });
        });


        $("form").submit(function(e) {
            e.preventDefault();

            var url = "{{ route('passportnicop.proceed') }}";
            $.ajax({
                type: "post",
                url: url,
                data: $(this).serialize(),

                beforeSend: function() {
                    $(".btn_save").html(
                        `<span class="spinner-border spinner-border-sm text-white" ></span> Loading...`
                    ).attr('disabled', true);
                },
                complete: function() {
                    $(".btn_save").html("Proceed Now").attr('disabled', false);
                }
            }).done(function(response) {

                toastr.options = {
                    "closeButton": true,
                    "progressBar": true
                }
                toastr.success(response.message);
                $('form')[0].reset();
                setTimeout(() => {
                    window.location.href = "{{ route('passportnicop.checkout') }}"
                }, 1000);
            }).fail(function(response) {

                // console.log(response.responseJSON.message)
                toastr.options = {
                    "closeButton": true,
                    "progressBar": true
                }
                toastr.error(response.responseJSON.message);
            });
        });
    </script>
@endsection