@extends('frontend.layouts.app')
@section('title-suffix')
    {{ __('checkout.title') }}
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/css/intlTelInput.css">
    {{-- <link rel="stylesheet" href="https://cdn.tutorialjinni.com/intl-tel-input/17.0.19/css/intlTelInput.css"/> --}}
@endpush

@section('main-content')
    <section class="breadcrumb breadcrumb_bg">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="breadcrumb_iner">
                        <div class="breadcrumb_iner_item">
                            <h2>{{ __('checkout.breadcrumb-0') }}</h2>
                            <p>{{ __('checkout.breadcrumb-1') }}<span>></span>{{ __('checkout.breadcrumb-2') }}<span>></span>{{ __('checkout.breadcrumb-3') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="checkout_area padding_top">
        <div class="container">
            {{-- <div class="returning_customer">
                <div class="check_title">
                    <h2>
                        Je suis un.e Client.e Récurrent.e
                        <a href="#">Click here to login</a>
                    </h2>
                </div>
                <p>
                    Si vous avez déjà fait des achats chez nous, veuillez saisir vos coordonnées 
                    dans les cases ci-dessous. <br/>
                    Si vous êtes un nouveau client, veuillez passer à la section Facturation et Livraison.
                </p>
                <form class="row contact_form" action="#" method="post" novalidate="novalidate">
                    <div class="col-md-6 form-group p_star">
                        <input type="text" class="form-control" id="name" name="name" value=" " />
                        <span class="placeholder" data-placeholder="Username or Email"></span>
                    </div>
                    <div class="col-md-6 form-group p_star">
                        <input type="password" class="form-control" id="password" name="password" value="" />
                        <span class="placeholder" data-placeholder="Password"></span>
                    </div>
                    <div class="col-md-12 form-group">
                        <button type="submit" value="submit" class="btn_3">
                            log in
                        </button>
                        <div class="creat_account">
                            <input type="checkbox" id="f-option" name="selector" />
                            <label for="f-option">Remember me</label>
                        </div>
                        <a class="lost_pass" href="#">Lost your password?</a>
                    </div>
                </form>
            </div> --}}
            <div class="cupon_area">
                <div class="check_title">
                    <h2>
                        {{ __('checkout.coupon-txt') }}
                    </h2>
                </div>
                <input type="text" placeholder="{{ __('checkout.coupon-placeholder') }}" id="coupon-area" />
                <a class="tp_btn btn_3" href="#"
                    onclick="event.preventDefault(); submitCoupon();">{{ __('checkout.coupon-btn') }}</a>
            </div>
            <div class="billing_details">
                <div class="row mb-5">
                    <div class="col-lg-8">
                        <h3>{{ __('checkout.body-title-1') }}</h3>
                        <form class="row contact_form" action="{{ route('order') }}" method="post" id="checkout-form"
                            novalidate="novalidate">
                            @csrf
                            <input type="hidden" name="coupon_code" id="coupon-code" />
                            <div class="col-md-6 form-group p_star">
                                <label class="required-star" for="first_name">{{ __('checkout.first-name') }}</label>
                                <input type="text" class="form-control" id="first" name="first_name"
                                    placeholder="{{ __('checkout.first-name') }}" autocomplete="given-name" required />
                                {{-- <span class="placeholder" data-placeholder="Prénoms"></span> --}}
                            </div>
                            <div class="col-md-6 form-group p_star">
                                <label class="required-star" for="last_name">{{ __('checkout.last-name') }}</label>
                                <input type="text" class="form-control" id="last" name="last_name"
                                    placeholder="{{ __('checkout.last-name') }}" autocomplete="family-name" required />
                                {{-- <span class="placeholder" data-placeholder="Nom"></span> --}}
                            </div>
                            {{-- <div class="col-md-12 form-group">
                                <input type="text" class="form-control" id="company" name="company"
                                    placeholder="Company name" />
                            </div> --}}
                            <div class="col-md-6 form-group p_star">
                                <label class="required-star" for="phone_number">{{ __('checkout.phone') }}</label>
                                <input type="tel" class="form-control" id="number" name="phone_number"
                                    placeholder="{{ __('checkout.phone') }}" autocomplete="tel" required />
                                {{-- <span class="placeholder" data-placeholder="Numéro de Téléphone"></span> --}}
                            </div>
                            <div class="col-md-6 form-group p_star">
                                <label class="required-star" for="email">{{ __('checkout.email') }}</label>
                                <input type="text" class="form-control" id="email" name="email"
                                    placeholder="{{ __('checkout.email') }}" autocomplete="email" required />
                                {{-- <span class="placeholder" data-placeholder="Addresse E-mail"></span> --}}
                            </div>
                            <div class="col-md-12 form-group p_star">
                                <label class="required-star" for="country">{{ __('checkout.country') }}</label>
                                <select class="form-control country_select not-overflow country" name="country"
                                    id="country-select" autocomplete="country" required>
                                    @foreach ($data as $key => $country)
                                        <option
                                            value="{{ $country['iso2'] }}"@php if ($country['iso2']=='TG') echo ' selected'; @endphp>
                                            {{ $country['emoji'] }}&nbsp;{{ $country['fr'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 form-group p_star">
                                <label class="required-star" for="state">{{ __('checkout.state') }}</label>
                                <input type="text" class="form-control" id="state" name="state"
                                    placeholder="{{ __('checkout.state-placeholder') }}" required />
                                {{-- <span class="placeholder" data-placeholder="Ville"></span> --}}
                            </div>
                            <div class="col-md-6 form-group p_star">
                                <label class="required-star" for="city">{{ __('checkout.city') }}</label>
                                <input type="text" class="form-control" id="city" name="city"
                                    placeholder="{{ __('checkout.city') }}" required />
                                {{-- <span class="placeholder" data-placeholder="Ville"></span> --}}
                            </div>
                            <div class="col-md-12 form-group p_star">
                                <label class="required-star" for="add1">{{ __('checkout.line-1') }}</label>
                                <input type="text" class="form-control" id="add1" name="add1"
                                    placeholder="{{ __('checkout.line-1-placeholder') }}" autocomplete="address-line1"
                                    required />
                                {{-- <span class="placeholder" data-placeholder="Addresse Ligne 1"></span> --}}
                            </div>
                            <div class="col-md-12 form-group p_star p_unstar ph-star">
                                <label class="optional-input" for="add2">{{ __('checkout.line-2') }}</label>
                                <input type="text" class="form-control" id="add2" name="add2"
                                    placeholder="{{ __('checkout.line-2-placeholder') }}" autocomplete="address-line2" />
                                {{-- <span class="placeholder" data-placeholder="Appartement, étage, suite, etc."></span> --}}
                            </div>
                            <div class="col-md-12 form-group">
                                <label class="optional-input" for="zip">{{ __('checkout.zip') }}</label>
                                <input type="text" class="form-control" id="zip" name="zip"
                                    placeholder="{{ __('checkout.zip-placeholder') }}" />
                            </div>
                            <div class="col-md-12 form-group">
                                <div class="creat_account mt-10">
                                    <h3>{{ __('checkout.body-title-2') }}</h3>
                                    {{-- <input type="checkbox" id="f-option3" name="ship_other" />
                                    <label for="f-option3">Expédier à une autre adresse ?</label> --}}
                                </div>

                                {{-- <div id="otherAddressFields" class="col-12">
                                    <div class="row">
                                        <div class="col-md-6 form-group p_star address-2-hidden">
                                            <select class="country_select not-overflow" name="other_country" id="country-select">
                                                @foreach ($data as $key => $country)
                                                    <option
                                                        value="{{ $country['iso2'] }}"@php if ($country['iso2']=='TG') echo ' selected'; @endphp>
                                                        {{ $country['emoji'] }}&nbsp;{{ $country['fr'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-6 form-group p_star address-2-hidden">
                                            <select class="country_select" name="other_state" id="state-select">
                                                @foreach ($data['222']['states'] as $key => $state)
                                                    <option value="{{ $state['id'] }}">{{ $state['name'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6 form-group p_star address-2-hidden">
                                            <input type="text" class="form-control" id="city" name="other_city" />
                                            <span class="placeholder" data-placeholder="Ville"></span>
                                        </div>
                                        <div class="col-md-6 form-group p_star address-2-hidden">
                                            <input type="text" class="form-control" id="add1" name="other_add1" />
                                            <span class="placeholder" data-placeholder="Addresse Ligne 1"></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 form-group p_star address-2-hidden">
                                            <input type="text" class="form-control" id="add2" name="other_add2"
                                                placeholder="Appartement, étage, suite, etc." />
                                        </div>
                                    </div>
                                </div> --}}

                                <div class="col-12 share-location">
                                    <h5>{{ __('checkout.location-title') }}</h5>
                                    <p>
                                        {{ __('checkout.location-desc') }}{{-- <br> Notez que si votre position ne corespond pas à 
                                        un quartier de la ville mentionnée ci-dessus, <br>la livraison ne pourra pas être effectuée 
                                        ou des frais supplémentaires seront appliqués. --}}
                                    </p>

                                    <a class="tp_btn" href="javascript:void(0);"
                                        onclick="getLocation()">{{ __('checkout.location-btn') }}</a>

                                    <p class="your-location" id="your-location">
                                        {{ __('checkout.location-span') }}<span id="location"></span>
                                    </p>
                                    <input type="hidden" name="latitude">
                                    <input type="hidden" name="longitude">
                                </div>
                                <div class="col-md-12 form-group margin-top">
                                    <label class="optional-input" for="message">{{ __('checkout.order-notes') }}</label>
                                    <textarea class="form-control" name="message" id="message" rows="1"
                                        placeholder="{{ __('checkout.order-notes-placeholder') }}"></textarea>
                                </div>

                            </div>

                            {{-- </form> --}}
                    </div>
                    <div class="col-lg-4">
                        <div class="order_box">
                            <h2>{{ __('checkout.order-recap') }}</h2>
                            @if (!$products)
                                <ul class="list">
                                    <li>
                                        <a href="#">
                                            {{ __('checkout.empty-cart') }}
                                        </a>
                                    </li>
                                </ul>
                            @else
                                <table>
                                    <thead>
                                        <tr>
                                            <th>{{ __('checkout.thead-product') }}</th>
                                            <th class="text-center">{{ __('checkout.thead-quantity') }}</th>
                                            <th class="text-right">{{ __('Total') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($products as $key => $product)
                                            <tr>
                                                <td>
                                                    @if (strlen($product['name']) > 12)
                                                        {{ substr($product['name'], 0, 18) . '...' }}
                                                    @else
                                                        {{ $product['name'] }}
                                                    @endif
                                                </td>
                                                <td class="text-center">{{ $product['quantity'] }}</td>
                                                <td class="text-right">{{ $product['total'] }}&nbsp;FCFA</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                                <ul class="list list_2">
                                    @php
                                        $subTotal = 0.0;
                                    @endphp

                                    @if ($products)
                                        @foreach ($products as $key => $product)
                                            @php
                                                $subTotal += doubleval($product['total']);
                                            @endphp
                                        @endforeach
                                    @endif
                                    <li>
                                        <a href="#">{{ __('checkout.subtotal') }}
                                            <span>{{ $subTotal }}&nbsp;FCFA</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">{{ __('checkout.shipping') }}
                                            <span class="d-flex">{{ __('checkout.flat-rate-span') }}:&nbsp;<div
                                                    id="flat-rate">5000
                                                </div>&nbsp;FCFA</span>
                                        </a>
                                        <input type="hidden" name="shiping_cost" id="shiping-cost">
                                    </li>
                                    <li>
                                        <a href="#">{{ __('Total') }}
                                            <span class="d-flex">
                                                <div id="total-div">{{ $subTotal }}</div>&nbsp;FCFA
                                            </span>
                                        </a>
                                    </li>
                                </ul>

                                {{-- <form action="#" method="POST"> --}}
                                <div class="row">
                                    <div class="col-12">
                                        <label class="payment-label"
                                            for="payment-select">{{ __('checkout.payment-method-select') }}</label>
                                    </div>
                                    <div class="col-12">
                                        <select class="form-control col-12 payment-select" name="payment_select"
                                            id="payment-select">
                                            <option value="" data-display="Choisir une méthode">
                                                {{ __('checkout.payment-method-option-1') }}
                                            </option>
                                            @if ($paymentMethods)
                                                @foreach ($paymentMethods as $paymentMethod)
                                                    <option value="{{ $paymentMethod['id'] }}">
                                                        {{ $paymentMethod['method'] }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="row creat_account">
                                    <input type="checkbox" id="f-option4" name="terms_cond" required />
                                    <label for="f-option4">{{ __('checkout.accept-terms-1') }}<a
                                            href="{{ route('gsc') }}">{{ __('checkout.accept-terms-2') }}</a></label>
                                </div>
                                {{-- <kkiapay-widget amount="1" 
                                                    key="6818e570fda411eea5b747dcf4273d1a"
                                                    position="center"
                                                    sandbox="true" 
                                                    data=""
                                                    callback="https://kkiapay-redirect.com" /> --}}
                                {{-- <kkiapay-widget amount="<montant-a-prelever-chez-le-client>" key="<votre-api-key>" position="center" sandbox="true" data="" callback="<url-de-redirection-quand-le-paiement-est-reussi>"></kkiapay-widget> --}}
                                {{-- <button class="kkiapay-button"></button> --}}
                                <a class="btn_3" role="button" id="submit-checkout-form" href="#"
                                    onclick="event.preventDefault(); submitCheckout();">{{ __('checkout.submit-btn') }}</a>
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    {{-- kkiapay script --}}
    <script src="https://cdn.kkiapay.me/k.js"></script>

    {{-- Twilio phone number API --}}
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/js/intlTelInput.min.js"></script>
    {{-- <script src="https://cdn.tutorialjinni.com/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script> --}}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#city').on('input', function() {
                var country = $('select.country').val();
                // var country = $('.country ul.list li.option.selected').attr('data-value');
                // var state = parseInt($('.state ul.list li.option.selected').attr('data-value'));
                var city = $(this).val();
                const flatDiv = $('#flat-rate');
                const totalDiv = $('#total-div');
                const shipCost = $('#shiping-cost');
                var flatRate = 0;

                if (country == 'TG') {
                    switch (city) {
                        case 'Lomé':
                            flatRate = 5000;
                            break;
                        case 'Lome':
                            flatRate = 5000;
                            break;
                        case 'lomé':
                            flatRate = 5000;
                            break;
                        case 'lome':
                            flatRate = 5000;
                            break;
                        default:
                            flatRate = 10000;
                            break;
                    }
                } else {
                    flatRate = 50000;
                }

                flatDiv.html(flatRate);
                shipCost.val(flatRate);
                subTotal = {{ $subTotal ?? 0.0 }};
                totalDiv.html(parseInt(subTotal) + flatRate);
            });
        });
    </script>

    <script>
        const x = document.getElementById("location");
        const y = document.getElementById("your-location");

        function getLocation() {
            if (navigator.geolocation) {
                success = navigator.geolocation.getCurrentPosition(showLocation, showError);
            } else {
                x.innerHTML = "La géolocalisation n\'est pas prise en charge par ce navigateur.";
            }
        }

        function showLocation(position) {
            y.style.display = "block";
            x.innerHTML = "Latitude: " + position.coords.latitude +
                ", Longitude: " + position.coords.longitude;

            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;

            $('#checkout-form').find("input[name=latitude]").val(latitude);
            $('#checkout-form').find("input[name=longitude]").val(longitude);

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                type: 'POST',
                url: '{{ route('user.checkout.getlocation') }}',
                data: 'latitude=' + latitude + '&longitude=' + longitude,
                success: function(msg) {
                    if (msg) {
                        $("#location").html(msg);
                    } else {
                        $("#location").html('Non Disponible');
                    }
                }
            });
        }

        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "Vous avez refusé la demande de géolocalisation."
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "Les informations de localisation ne sont pas disponibles."
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "La demande de géolocalisation de l'utilisateur a expiré."
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "Une erreur inconnue s'est produite."
                    break;
            }
        }
    </script>

    <script>
        $(document).ready(function() {
            // Écouteur d'événement sur le changement de l'état de la case à cocher
            $('#f-option3').change(function() {
                if ($(this).is(':checked')) {
                    $('.address-2-hidden').removeClass('address-2-hidden');
                    $('#otherAddressFields').removeClass('address-2-hidden');
                } else {
                    $('#otherAddressFields').addClass('address-2-hidden');
                }
            });
        });
    </script>

    <script>
        function submitCoupon() {
            $('#coupon-code').val($('#coupon-area').val());
            console.log(typeof $('#coupon-code').val());

            if ($('#coupon-code').val().trim() != "") {
                $.notify("Coupon enregistré", "success");
                return true;
            }
        }
    </script>

    <script>
        const input = document.querySelector("#number");

        var iti = window.intlTelInput(input, {
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/js/utils.js",
            autoPlaceholder: "aggressive",
            // separateDialCode: true,
            //Default country
            initialCountry: "auto",
            geoIpLookup: function(success, failure) {
                fetch("https://ipapi.co/json")
                    .then(function(res) {
                        return res.json();
                    })
                    .then(function(data) {
                        success(data.country_code);
                    })
                    .catch(function() {
                        failure();
                    });
            },
            i18n: {
                // Placeholder for the search input in the dropdown
                searchPlaceholder: "Rechercher",
            },
        });

        input.addEventListener("change", function() {
            $('#checkout-form').find("input[name=phone_number]").val(iti.getNumber());
            // alert(iti.getNumber());
        });
    </script>

    <script>
        function formToJSON() {
            var formData = $('#checkout-form').serializeArray();

            var data = {};

            $.each(formData, function(index, field) {
                data[field.name] = field.value;
            });

            console.log(data);

            var jsonData = JSON.stringify(data);
            console.log(jsonData);

            return jsonData;
        }
    </script>

    <script>
        function submitCheckout() {
            var terms = $("#f-option4").prop('checked');
            var latitude = $('#checkout-form').find("input[name=latitude]").val().trim();
            var longitude = $('#checkout-form').find("input[name=longitude]").val().trim();
            var firstName = $('#checkout-form').find("input[name=first_name]").val().trim();
            var lastName = $('#checkout-form').find("input[name=last_name]").val().trim();
            var phoneNumber = $('#checkout-form').find("input[name=phone_number]").val().trim();
            var email = $('#checkout-form').find("input[name=email]").val().trim();
            var city = $('#checkout-form').find("input[name=city]").val().trim();
            var address = $('#checkout-form').find("input[name=add1]").val().trim();
            var paymentMethod = $('#payment-select').val();

            if (firstName == "") {
                $.notify("Vous devez inscrire votre prénom", "error");
                return false;
            }

            if (lastName == "") {
                $.notify("Vous devez inscrire votre nom", "error");
                return false;
            }

            if (phoneNumber == "") {
                $.notify("Vous devez inscrire votre numéro de téléphone", "error");
                return false;
            }
            if (email == "") {
                $.notify("Vous devez inscrire votre adresse Email", "error");
                return false;
            }

            if (city == "") {
                $.notify("Vous devez inscrire votre ville de résidence", "error");
                return false;
            }

            if (address == "") {
                $.notify("Vous devez inscrire votre adresse", "error");
                return false;
            }

            if (latitude == "" || longitude == "") {
                $.notify("Vous devez partager votre position", "error");
                return false;
            }

            if (paymentMethod == undefined || paymentMethod == "") {
                $.notify("Vous devez choisir une méthode de paiement", "error");
                return false;
            }

            if (!terms) {
                $.notify("Vous devez accepter les termes et conditions", "error");
                return false;
            }

            var jsonData = formToJSON();

            // kkiapay widget call
            if (paymentMethod == "3") {
                openKkiapayWidget({
                    paymentmethod: "card",
                    amount: parseInt($('#total-div').html()),
                    callback: "{{ route('kkiapay') }}",
                    name: firstName + " " + lastName,
                    email: email,
                    position: "center",
                    // sandbox:"true",
                    key: "{{ env('KKIAPAY_PUBLIC_API_KEY') }}",
                    theme: "#7f2b71",
                    data: jsonData
                });

                addSuccessListener(response => {
                    console.log(response);
                });

                addFailedListener(error => {
                    console.log(error);
                });

                return 0;
            } else {
                document.getElementById('checkout-form').submit();
            }
        }
    </script>
@endpush