@extends('layouts.master')

@section('content')
<div class="container-fluid p-5 bgImage" style="min-height: calc(100vh - 110px);">
    <section class="gradient-custom">
        <div class="container-fluid h-100">
            <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-12 col-md-8 col-lg-6 col-xl-6">
                    <div class="card bg-white text-black" style="border-radius: 1rem;">
                        <div class="card-body p-5">
                            <h2 class="fw-bold mb-5 custom-heading">@lang('messages.platform')</h2>
                            <div id="alert-container">
                                @if (session('success'))
                                <div class="alert alert-success">{{ session('success') }}</div>
                                @endif
                                @if ($errors->any())
                                <div class="alert alert-danger" role="alert">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endif
                            </div>

                            <form action="{{ route('updatePlatform') }}" method="POST">


                                @csrf
                                <div class="row mb-3">
                                    <label for="country"
                                        class="col-sm-3 col-form-label logincol">@lang('messages.country') :</label>
                                    <div class="col-sm-6">
                                        <select name="country" id="countrySelect" class="form-control">
                                            <option value="">Select Country</option>
                                            @foreach ($countries as $country)
                                            <option value="{{ $country->id }}" @if ($user->country == $country->id)
                                                selected @endif>
                                                {{ $country->title }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('country')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="embassy"
                                        class="col-sm-3 col-form-label logincol">@lang('messages.embassy') :</label>
                                    <div class="col-sm-6">
                                        <select name="embassy" id="selected_embassy" class="form-control">
                                            <option value="">Select Embassy</option>
                                            @foreach ($embassies as $embassy)
                                            <option value="{{ $embassy->id }}" @if ($user->embassies ==
                                                $embassy->id)
                                                selected @endif>
                                                {{ $embassy->name }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('embassy')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row mb-3">

                                    <label for="service" class="col-sm-3 col-form-label logincol">Services :</label>
                                    <div class="col-sm-6">
                                        <select name="service" id="serviceName" class="form-control">
                                            <option value="">Select Service</option>
                                            @foreach ($services as $service)
                                            <option value="{{ $service->id }}">
                                                {{ $service->name }}
                                            </option>
                                            @endforeach
                                        </select>
                                        @error('service')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="sub-service" class="col-sm-3 col-form-label logincol">Sub Services
                                        :</label>
                                    <div class="col-sm-6" id="subserviceadd">
                                        <select name="sub_service" id="subServiceName" class="form-control">
                                            <option value="">Select Sub Service</option>
                                        </select>
                                        @error('sub_service')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <label for="platform-fee" class="col-sm-3 col-form-label logincol">Platform Fees
                                        :</label>
                                    <div class="col-sm-6">
                                        <input type="text" id="decimalInput" name="platform_fee"
                                            onkeypress="return isDecimalKey(event)" oninput="validateDecimalInput(this)"
                                            class="form-control" />
                                        @error('platform_fee')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="speed-fee" class="col-sm-3 col-form-label logincol">Speed Fees
                                        :</label>
                                    <div class="col-sm-6">
                                        <input type="text" id="decimalInput1" name="speed_fee"
                                            onkeypress="return isDecimalKey(event)" oninput="validateDecimalInput(this)"
                                            class="form-control" />
                                        @error('speed_fee')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label for="speed-fee" class="col-sm-3 col-form-label logincol">Normal Fees
                                        :</label>
                                    <div class="col-sm-6">
                                        <input type="text" id="decimalInput1" name="normal_fee"
                                            onkeypress="return isDecimalKey(event)" oninput="validateDecimalInput(this)"
                                            class="form-control" />
                                        @error('normal_fee')
                                        <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <script>
                                document.querySelector('select[name="country"]').addEventListener('change',
                                    function(
                                        event) {
                                        const selectedCountry = event.target.value;
                                        const embassySelect = document.querySelector('select[name="embassy"]');
                                        const selectedEmbassyField = document.querySelector(
                                            '#selected_embassy');

                                        // Clear existing embassy options
                                        embassySelect.innerHTML =
                                            '<option value="" disabled selected>Select an embassy</option>';
                                        // Fetch and populate embassy options based on selected country
                                        try {
                                            fetch(`/get-embassies/${selectedCountry}`)
                                                .then(response =>
                                                    response.json()
                                                )
                                                .then(data => {
                                                    if (data.length === 0) {
                                                        const option = document.createElement('option');
                                                        option.textContent = 'No embassy';
                                                        embassySelect.appendChild(option);
                                                    } else {
                                                        data.forEach(embassy => {
                                                            const option = document.createElement(
                                                                'option');
                                                            option.value = embassy.id;
                                                            option.textContent = embassy.name;
                                                            embassySelect.appendChild(option);
                                                        });
                                                    }
                                                });
                                        } catch (e) {
                                            console.log("Error");

                                        }
                                    });
                                document.querySelector('select[name="embassy"]').addEventListener('change',
                                    function(
                                        event) {
                                        const selectedEmbassy = event.target.value;
                                        document.querySelector('#selected_embassy').value = selectedEmbassy;
                                    });
                                </script>

                                <script>
                                function isDecimalKey(evt) {
                                    var charCode = evt.which ? evt.which : evt.keyCode;
                                    // Allow only digits (48-57), dot (46), and control keys like backspace (8)
                                    if (charCode !== 46 && (charCode < 48 || charCode > 57) && charCode !== 8) {
                                        return false;
                                    }
                                    return true;
                                }

                                function validateDecimalInput(input) {
                                    // Allow only one decimal point and ensure valid numeric format
                                    var value = input.value;
                                    var regex = /^\d*\.?\d*$/;
                                    if (!regex.test(value)) {
                                        input.value = value.slice(0, -1);
                                    }
                                }
                                </script>


                                <div class="row">
                                    <div class="col-md-12 text-center">
                                        <button type="submit" class="btn rounded-pill btn-lg px-5 savebutton">Save<i
                                                class="fas fa-thin fa-angle-right p-1"></i></button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var alertContainer = document.getElementById("alert-container");
    if (alertContainer) {
        setTimeout(function() {
            alertContainer.innerHTML = '';
        }, 5000); // 5 seconds
    }
});
</script>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#serviceName').change(function(e) {
        e.preventDefault();
        var selectedservice = $(this).val();
        // alert(selectedservice);
        $.ajax({
            url: '{{ route("viewsubcategory") }}', // Laravel route
            type: 'GET',
            data: {
                selectedservice: selectedservice
            },
            success: function(response) {
                $("#subServiceName").html(response);
                // alert('Response from server: ' + response);
            },
            error: function(xhr, status, error) {
                // console.error('Error: ' + error);
            }
        });
    });
});
</script>