@extends('layouts.master')

@section('title', 'Express54')

@section('content')

    <!--links-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        ul#progressbar li.active::before, 
        ul#progressbar li.active::after {
            background: {{ $colorCode }};  /* Utilisation de la couleur du pays */
            color_: white;
            !important;
        }
    </style>

    <!-- MultiStep Form -->
    <div class="stepper-body" style="min-height: calc(100vh - 110px);">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-11 col-sm-9 col-md-8 col-lg-8  text-center p-0 mt-3 mb-2">
                    <div class="card px-5 pt-4 pb-0 mt-3 mb-3">

                        <form id="msform" method="POST"
                            action="{{ route('editCollectData', ['id' => $application->id]) }}"
                            enctype="multipart/form-data">
                            @csrf

                            <!-- progressbar -->
                            <ul id="progressbar">
                                <li class="active" id="collectdata"><strong>@lang('messages.collectdata')</strong></li>
                                <li id="delivery"><strong>@lang('messages.delivery')</strong></li>
                                <li id="pay"><strong>@lang('messages.pay')</strong></li>
                            </ul>

                            <div id="alert-container">
                                @if (Session('error'))
                                    <div class="alert alert-warning" role="alert">
                                        {{ Session('error') }}
                                    </div>
                                @endif

                                @if (Session('success'))
                                    <div class="alert alert-success" role="alert">
                                        {{ Session('success') }}
                                    </div>
                                @endif
                            </div>
                            <!-- alert time out  -->
                            <script>
                                document.addEventListener("DOMContentLoaded", function() {
                                    var alertContainer = document.getElementById("alert-container");
                                    if (alertContainer) {
                                        setTimeout(function() {
                                            alertContainer.remove();
                                        }, 5000);
                                    }
                                });
                            </script>
                            <br>



                            <fieldset id="collect_data">

                                <input type="hidden" id="parentServiceId" name="parentServiceId"
                                    value="{{ $application->service_selected }}">
                                <input type="hidden" id="childServiceId" name="childServiceId"
                                    value="{{ $application->sub_service }}">

                                <input type="hidden" name="selected_app_id" id="selected_app_id">


                                <div class="form-group row">
                                    <label for="" class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="name" name="name"
                                            value="{{ $application->name }}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="" class="col-sm-3 col-form-label text-end">@lang('messages.family_name')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="family_name" name="family_name"
                                            value="{{ $application->family_name }}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="appartmentornumber"
                                        class="col-sm-3 col-form-label text-end">@lang('messages.street')<span aria-hidden="true"
                                            class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="appartmentornumber1"
                                            name="appartment_number" value="{{ $application->appartment_number }}" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="city" class="col-sm-3 col-form-label text-end">@lang('messages.city')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="city1" name="city"
                                            value="{{ $application->city }}" required>
                                    </div>
                                </div>


                                <div class="form-group row mb-3">
                                    <label for="country" class="col-sm-3 col-form-label text-end">@lang('messages.country')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <select class="form-control countrySelect" id="countrySelect"
                                            name="country_selected" value="{{ $application->country_selected }}"
                                            data-value="{{ $application->country_selected }}" required>
                                            <option value="">Select Country</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row ">
                                    <label for="state" class="col-sm-3 col-form-label text-end">@lang('messages.state')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <select class="form-control stateSelect" id="stateSelect" name="state"
                                            value="{{ $application->state }}"
                                            data-country="{{ $application->country_selected }}"
                                            data-state="{{ $application->state }}" required>
                                            <option value="">Select State</option>
                                        </select>
                                    </div>
                                </div><br>
                                <div class="form-group row">
                                    <label for="zip_code" class="col-sm-3 col-form-label text-end">@lang('messages.zip_code')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="zip_code1" name="zip_code"
                                            value="{{ $application->zip_code }}" required>
                                    </div>
                                </div>


                                <div class="form-group row">
                                    <label for="email" class="col-sm-3 col-form-label text-end">@lang('messages.email')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="email" class="form-control" name="email"
                                            value="{{ $application->email }}" required>
                                    </div>
                                </div>

                                <div class="form-group row ">
                                    <label for="" class="col-sm-3 col-form-label text-end">@lang('messages.contact')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="contact" name="contact"
                                            value="{{ $application->contact }}">
                                    </div>
                                </div>

                                <div class="form-group row mb-3">
                                    <label for="">You are requesting your document to be delivered from the
                                        following embassy</label>
                                </div>

                                <div class="form-group row mb-3">
                                    <label for="" class="col-sm-3 col-form-label text-end">@lang('messages.country')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-3">
                                        <select name="country" class="form-select">
                                            <option value="" disabled selected>@lang('messages.selectcountry')</option>
                                            @foreach ($countries as $country)
                                                <option value="{{ $country->id }}"
                                                    {{ $currentCountryId == $country->id ? 'selected' : '' }}>
                                                    {{ $country->title }}</option>
                                            @endforeach
                                        </select>
                                    </div>


                                    <label for="" class="col-sm-2 col-form-label text-end">@lang('messages.embassies')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-3">
                                        <select name="embassies" class="form-select">
                                            <option value="" disabled selected>@lang('messages.select_embassy')</option>
                                            @foreach ($embassies as $embassy)
                                                <option value="{{ $embassy->id }}"
                                                    {{ $currentEmbassyId == $embassy->id ? 'selected' : '' }}>
                                                    {{ $embassy->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row p-2">
                                    <label for="demandtype"
                                        class="col-sm-3 col-form-label text-end">@lang('messages.demand_type')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <select class="form-select" name="deliveryselectedService"
                                            id="deliveryselectedService" required>
                                            <option value="">@lang('messages.please_select_service')</option>
                                            @foreach ($services as $service)
                                                @if ($service->status === 'enable' && $service->id != 8)
                                                    <option value="{{ $service->id }}"
                                                        {{ $serviceID == $service->id ? 'selected' : '' }}>
                                                        @lang($service->name)
                                                    </option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                {{-- <div id="subServicesContainer" style="display: none;">
                                    <div class="form-group row p-2">
                                        <div class="col-sm-3 col-form-label text-end">
                                            <label for="subServices">@lang('messages.demand_type'):<span aria-hidden="true"
                                                    class="required">*</span></label>
                                        </div>
                                        <div class="col-sm-6">
                                            <select class="form-select" name="subServices" id="subServices" required
                                                onchange="loadApplications()">
                                                <option value="">@lang('messages.please_select_service')
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group row p-2 ">
                                        <div id="applicationsContainer">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th></th>
                                                        <th>ID</th>
                                                        <th>Name</th>
                                                        <th>Service</th>
                                                        <th>Sub Service</th>
                                                        <th>Status</th>
                                                        <th>Delivery Type</th>
                                                    </tr>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div> --}}



                                <button type="button" name="next"
                                    class="btn rounded-pill btn-lg mb-3 next action-button" value="Next"
                                    id="nextButton4" onclick="updateprice()" style="background: {{ $colorCode }};"
                                    onmouseover="this.style.background='{{ $hovercolor }}';"
                                    onmouseout="this.style.background='{{ $colorCode }}';">@lang('messages.next')
                                    <i class="fas fa-thin fa-angle-right"></i>
                                </button>

                                <script>
                                    $(document).ready(function() {
                                        $("#nextButton4").prop("disabled", true);

                                        function checkFields() {
                                            var allRequiredFieldsFilled = true;
                                            $("#collect_data input, #collect_data select").each(
                                                function() {
                                                    if ($(this).prop("required") && !$(this).hasClass("d-none")) {
                                                        if ($(this).is("select")) {
                                                            if ($(this).val() === "" || $(this).val() === null) {
                                                                allRequiredFieldsFilled = false;
                                                                return false;
                                                            }
                                                        } else if ($(this).is("input") && $(this).val() === "") {
                                                            allRequiredFieldsFilled = false;
                                                            return false;
                                                        }
                                                    }
                                                });
                                            if ($('#age').prop("required") && $("#age").val() === "") {
                                                allRequiredFieldsFilled = false;
                                            }
                                            if ($("#age").val() === "16 – 17 years old" || $("#age").val() === "18 years old and Plus") {
                                                if ($('#national_id').prop("required") && $("#national_id").val() === "") {
                                                    allRequiredFieldsFilled = false;
                                                }
                                            }
                                            if (allRequiredFieldsFilled) {
                                                return true;
                                            } else {
                                                // $("#nextButton").prop("disabled", true);
                                                return false;
                                            }
                                        }

                                        // Function to enable/disable the "Next" button based on field validation
                                        function toggleNextButton() {
                                            const isValid = checkFields();
                                            $("#nextButton4").prop("disabled", !isValid);
                                        }

                                        // Call the toggleNextButton function when any input field changes
                                        $("input, select").on("input change", function() {
                                            toggleNextButton();
                                        });

                                        // Call the toggleNextButton function on page load
                                        toggleNextButton();
                                    });
                                </script>
                            </fieldset>

                            <fieldset>
                                <div class="form-group row">
                                    <label for=""
                                        class="col-sm-4 col-form-label p-3 text-end">@lang('messages.selectdeliverymethod')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <select class="form-select" name="deliveryMethod" id="deliveryMethod" disabled>
                                            {{-- <option value="pickup">@lang('messages.pickup')</option> --}}
                                            <option value="delivery">@lang('messages.deliverycharges')</option>
                                        </select>
                                    </div>
                                    <input type="hidden" name="deliveryMethod" id="selectedDeliveryMethod"
                                        value="">


                                    <div id="addressFields">
                                        <div class="form-group row">
                                            <label for="appartmentornumber"
                                                class="col-sm-4 col-form-label text-end">@lang('messages.street')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="appartmentornumber"
                                                    name="appartment_number"
                                                    value="{{ $application->appartment_number }}">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="city"
                                                class="col-sm-4 col-form-label text-end ">@lang('messages.city')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="city" name="city"
                                                    value="{{ $application->city }}">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="state"
                                                class="col-sm-4 col-form-label text-end">@lang('messages.state')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control " id="state"
                                                    name="state" value="{{ $application->state }}">
                                            </div>

                                        </div>
                                        <div class="form-group row">
                                            <label for="zip_code"
                                                class="col-sm-4 col-form-label text-end">@lang('messages.zip_code')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="zip_code"
                                                    name="zip_code" value="{{ $application->zip_code }}">
                                            </div>
                                        </div>
                                    </div>
                                    <script>
                                        function updateprice() {
                                            const selectedServiceInput = 'Expedite';
                                            const parentServiceId = document.getElementById('parentServiceId').value;
                                            const platformFeeDisplay = 9.99;

                                            var totalfee = 0;


                                            totalfee = parseFloat(platformFeeDisplay);

                                            document.getElementById('platform_fee_show').innerHTML = platformFeeDisplay;
                                            document.getElementById('shipping_charges_show').innerHTML = 0;
                                            document.getElementById('total_amount_show').innerHTML = totalfee.toFixed(2);

                                        }
                                    </script>

                                    <script>
                                        $(document).ready(function() {
                                            // Function to show/hide address fields based on the selected delivery method
                                            function toggleAddressFields() {
                                                var deliveryMethod = $('#deliveryMethod').val();
                                                var addressFields = $('#addressFields');
                                                var countryCode = $('#countrySelect').val();
                                                var postalCode = $('#zip_code').val();

                                                var serviceFee = $('#servicefee_show').html();
                                                var platformFee = $('#platform_fee_show').html();
                                                var shippingFee = $('#shipping_charges_show').html();
                                                var total = 0;

                                                if (deliveryMethod === 'delivery') {
                                                    addressFields.show();
                                                    $.ajax({
                                                        type: 'POST',
                                                        url: '/posts/store',
                                                        headers: {
                                                            'X-CSRF-TOKEN': '