@extends('site.layouts.app')
@section('title', 'Money Transfer')
@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>Money Transfer</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">Money Transfer</li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- END CONTAINER-->
    </div>
    <!-- END SECTION BREADCRUMB -->

    <!-- START MAIN CONTENT -->
    <div class="main_content">
        <div class="section">
            <div class="container">
                <h2>Money Transfer</h2>

                <form action="{{ route('site.money_trnasfer.start') }}" method="post">
                    @csrf
                    <div class="row">
                        {{-- <div class="col-md-6">
                            <div class="border p-3 p-md-4">
                                <div class="heading_s1 mb-3">
                                    <h4>Sender Details</h4>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="name">Name</label>
                                    <input class="form-control" value="{{ auth()->user()->name }}" readonly type="text"
                                        placeholder="Name">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="name">Email</label>
                                    <input class="form-control" value="{{ auth()->user()->email }}" readonly type="email"
                                        placeholder="Email">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="Phone">Phone</label>
                                    <input class="form-control" value="{{ auth()->user()->phone }}" readonly type="text"
                                        placeholder="Phone">
                                </div>
                                <div class="form-group mb-3">
                                    <label for="country_id">Country</label>
                                    @php
                                        $sender = App\Models\Country::where('id', auth()->user()->country_id)

                                            ->first();
                                        $sender_country_name = $sender->name;
                                    @endphp
                                    @if (isset($sender))
                                        <div class="">

                                            <input class="form-control" value="{{ $sender->name }}" readonly type="text">
                                        </div>
                                    @else
                                        <select class="form-select first_null text-capitalize " disabled id="">
                                            <option value="">No country has set</option>
                                        </select>
                                        Kindly set your country for shop
                                        <u><a href="/">Click here</a></u>
                                    @endif
                                </div>



                                <div class="form-group mb-3">
                                    <label for="currency">Currency</label>
                                    <input class="form-control" value="{{ $sender->currency }}" readonly type="text"
                                        name="sender_currency" placeholder="Currency">
                                </div>

                            </div>
                        </div> --}}

                        @php
                            $sender = App\Models\Country::where('id', auth()->user()->country_id)->first();
                            $sender_country_name = $sender->name;
                        @endphp


                        <div class="col-md-12">
                            <div class="border p-3 p-md-4">
                                <div class="heading_s1 mb-3">

                                    <div class="d-flex justify-content-between">
                                        <h4>Receiver Details</h4>
                                        <div>
                                            <a href="javascript::void(0)" data-bs-target="#recepientnModal"
                                                data-bs-toggle="modal" class="btn btn-xs btn-fill-out">Select Recipient</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="name">Account Holder Name</label>
                                    <input class="form-control" required type="text" id="receiver_name"
                                        name="receiver_name" placeholder="Receiver Name">
                                    <div class="text-danger" id="receiver_name_error"></div>
                                </div>
                                <div class="form-group mb-3">
                                    <label for="Phone">Account Holder Phone</label> <br>
                                    <input class="form-control" required type="text" id="receiver_phone"
                                        placeholder="Phone">
                                    <div class="text-danger" id="receiver_phone_error"></div>
                                    <input type="hidden" id="receiver_phone1" name="receiver_phone" placeholder="Phone">
                                    <input type="hidden" id="country_code" name="country_code">
                                </div>
                                <div class="form-group mb-3 mt-4">
                                    <label for="">Receiver Country</label>
                                    <select name="receiver_country" class="form-select first_null text-capitalize select2 "
                                        required id="country">
                                        <option value="">Please select</option>
                                        @foreach ($countries as $country)
                                            @if ($country->name == 'PAKISTAN_')
                                                @php
                                                    continue;
                                                @endphp
                                            @endif
                                            <option value="{{ $country->id }}">{{  $country->name }}</option>
                                        @endforeach

                                    </select>
                                </div>

                               


                                <div class="form-group mb-3 mt-1">
                                    <label for="name">Account Number</label>
                                    <input class="form-control" required type="text" id="receiver_account_number"
                                        name="receiver_account_number" placeholder="Account Number">
                                </div>

                                <div class="form-group mb-3">
                                    <label for="name">Complete Address</label>
                                    <textarea class="form-control" rows="1" name="receiver_address" id='receiver_address'
                                        placeholder="Complete Address"></textarea>
                                    <div class="text-danger" id="complete_address_error"></div>

                                </div>
                                <div class="form-group mb-3 mt-1">
                                    <label for="name">Zip Code</label>
                                    <input class="form-control" required type="number" id="receiver_zipcode"
                                        name="receiver_zipcode" placeholder="Zip Code">
                                </div>

                            </div>
                        </div>

                        <div class="col-md-12 col-lg-12 col-sm-12 mt-2">
                            <button type="submit" name="start" class="btn btn-fill-out btn_save">Continue</button>
                        </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="recepientnModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Recipients</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- Modal body -->
                @php
                    $recipients = App\Models\MoneyRecipient::where('user_id', auth()->user()->id)->get();

                @endphp
                <div class="modal-body">
                    <table class="table sm table-bordered">
                        <tr>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Country</th>
                            <th>Bank</th>
                            <th>Account#</th>
                            <th>+</th>
                        </tr>
                        @foreach ($recipients as $recipient)
                            @php
                                $country = App\Models\Country::where('id', $recipient->country_id)->first();
                                $bank = App\Models\BankList::where('id', $recipient->bank_id)->first();
                            @endphp
                            <tr>
                                <td>{{ $recipient->name }}</td>
                                <td>{{ $recipient->phone }}</td>
                                <td>{{ $country->name }}</td>
                                <td>{{ $bank->name }}</td>
                                <td>{{ $recipient->account_no }}</td>
                                <td>
                                    <a href="javascript::void(0)" data-name="{{ $recipient->name }}"
                                        data-phone="{{ $recipient->phone }}" data-bank="{{ $recipient->bank_id }}"
                                        data-country="{{ $recipient->country_id }}"
                                        data-account="{{ $recipient->account_no }}"
                                        data-address="{{ $recipient->address }}"
                                        data-zipcode="{{ $recipient->zipcode }}"
                                        class="btn btn-xs btn-fill-out add_recipient">
                                        <span class="fa fa-plus"></span>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </table>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-xs btn-dark" data-bs-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>
    </div>
    <link href="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.12/build/css/intlTelInput.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.12/build/js/intlTelInput.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var input = document.querySelector("#receiver_phone");
            var iti = window.intlTelInput(input, {
                initialCountry: "pk",
                separateDialCode: true,
                utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.12/build/js/utils.js",

            });

            // store the instance variable so we can access it in the console e.g. window.iti.getNumber()
            window.iti = iti;

            // Rest of your script...
        });


        $(".add_recipient").click(function() {
            let recipient_name = $(this).data("name");
            let recipient_phone = $(this).data("phone");
            let recipient_country = $(this).data("country");
            let recipient_bank = $(this).data("bank");
            let recipient_account = $(this).data("account");
            let address = $(this).data("address");
            let zipcode = $(this).data("zipcode");


            let country_code = recipient_phone.slice(0, 3); // Extract country code (e.g., +92)
            let phone_number = recipient_phone.slice(3); // Extract phone number without country code

            // Set the country code and phone number in the form
            $("#receiver_phone1").val(phone_number);
            $("#country_code").val(country_code);
            $("#receiver_phone").val(phone_number);

            // Set data into form fields
            $("#receiver_name").val(recipient_name);
            // $("#receiver_phone").val(recipient_phone);
            $("#receiver_account_number").val(recipient_account);
            $("#receiver_address").val(address);
            $("#receiver_zipcode").val(zipcode);
            $("#country").val(recipient_country).trigger('change');
            // Assuming you have a function to fetch banks based on country
            // fetchBanks(recipient_country, recipient_bank);

            // Optionally close the modal
            $("#recepientnModal").modal('hide');
        });

        $('#country').on('change', function() {
            var country_id = $(this).val();

            var country_code = iti.getSelectedCountryData();
            dialCode = country_code.dialCode
            $("#country_code").val(dialCode)

            $('#banks').empty();

            if (country_id) {
                $.ajax({
                    url: '{{ route('countries.banks') }}',
                    method: 'GET',
                    data: {
                        country_id: country_id
                    },
                    success: function(data) {
                        console.log(data);
                        $('#banks').empty().append('<option value="">Select bank</option>');

                        // Separate banks and E-Wallets into different optgroups
                        var banksOptgroup = $('<optgroup label="Bank">');
                        var eWalletsOptgroup = $('<optgroup label="E-Wallet">');

                        $.each(data, function(key, bank) {
                            if (bank.type === 'Bank') {
                                banksOptgroup.append('<option value="' + bank.id + '">' + bank
                                    .name + '</option>');
                            } else if (bank.type === 'E-Wallet') {
                                eWalletsOptgroup.append('<option value="' + bank.id + '">' +
                                    bank.name + '</option>');
                            }
                        });

                        // Append optgroups to the select element
                        $('#banks').append(banksOptgroup).append(eWalletsOptgroup);
                    }
                });
            } else {
                $('#banks').empty().append('<option value="">Select bank</option>');
            }
        });

        $("#receiver_name").on('input', function() {
            // Validate the receiver_name field using regex
            var receiverNameRegex = /^[a-zA-Z\s'-]+$/;
            var receiverNameValue = $(this).val();

            if (!receiverNameRegex.test(receiverNameValue)) {
                $("#receiver_name_error").text("Please enter a valid receiver name.");
                $(".btn_save").attr("disabled", true);
                $(this).addClass('is-invalid');
            } else {
                $("#receiver_name_error").text("");
                $(".btn_save").attr("disabled", false);
                $(this).removeClass('is-invalid');
            }

        });


        $("#receiver_phone").on('input', function() {
            var phoneNumberRegex = /^[\d\s()-]+$/;
            var phoneNumberValue = $(this).val();

            if (!phoneNumberRegex.test(phoneNumberValue)) {
                $("#receiver_phone_error").text("Please enter a valid phone number.");
                $(this).addClass('is-invalid');
                $(".btn_save").attr("disabled", true);
            } else {
                $("#receiver_phone_error").text(""); // Clear the error message if valid
                $(".btn_save").attr("disabled", false);
                $(this).removeClass('is-invalid');
            }


        });

        $('#receiver_address').on('input', function() {
            var address = $(this).val();
            if (address.length < 50) {
                $(this).addClass('is-invalid');
                $(".btn_save").attr("disabled", true);
                $("#complete_address_error").text("Please complete your Address");
            } else {
                $(this).removeClass('is-invalid'); // Remove the CSS class if the input is valid
                $(".btn_save").attr("disabled", false);
                $("#complete_address_error").text("");
            }
        });



        $("form").submit(function(e) {
            var phoneNumber = iti.getNumber();

            $("#receiver_phone1").val(phoneNumber)

            e.preventDefault();
            if (!window.iti.isValidNumber()) {
                // Display an error message if the phone number is invalid
                toastr.error('Please enter a valid phone number for the selected country');
                $("#receiver_phone").addClass('is-invalid');
                return;
            }
            var url = $(this).attr('action');;
            $.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("Continue").attr('disabled', false);
                }
            }).done(function(response) {

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

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