@extends('layouts.master')

@section('content')
    <div class="p-5 bgImage" style="min-height: calc(100vh - 110px);">
        <div class="row justify-content-center">
            <div class="col-md86 col-sm-8 col-xs-12">
                <div class="card mx-4 mx-md-5 shadow-5-strong" style="backdrop-filter: blur(30px);">
                    <div class="card-body py-5 px-md-6">
                        <div class="row d-flex justify-content-center">
                            <div class="col-lg-10">

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

                                <h2 class="fw-bold mb-5 custom-heading">@lang('messages.edit_embassy')</h2>

                                <form action="{{ route('updateEmbassies', [$embassies->id]) }}" method="POST">
                                    @csrf

                                    <div class="row">
                                        <div class="col-md-6 mb-4">
                                            <div class="form-outline">
                                                <label class="form-label">@lang('messages.embassy')</label>
                                                <input type="text" class="form-control" name="name"
                                                    value="{{ $embassies->name }}" />
                                            </div>
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <div class="form-outline">
                                                <label class="form-label">@lang('messages.street')</label>
                                                <input type="text" class="form-control" name="appartment_number"
                                                    value="{{ $embassies->appartment_number }}" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <div class="form-outline">
                                                <label class="form-label">@lang('messages.city')</label>
                                                <input type="text" class="form-control" name="city"
                                                    value="{{ $embassies->city }}" />
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <div class="form-outline">
                                                <label class="form-label">@lang('messages.state')</label>
                                                <input type="text" class="form-control" name="state"
                                                    value="{{ $embassies->state }}" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <div class="form-outline">
                                                <label class="form-label">@lang('messages.zip_code')</label>
                                                <input type="text" class="form-control" name="zip_code"
                                                    value="{{ $embassies->zip_code }}" />
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <div class="form-outline">
                                                <label class="form-label">@lang('messages.phone_extension')</label>
                                                <input type="text" class="form-control" name="phone_extension"
                                                    value="{{ $embassies->phone_extension }}" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <div class="form-outline">
                                                <label class="form-label">@lang('messages.phone')</label>
                                                <input type="text" class="form-control" name="phone"
                                                    value="{{ $embassies->phone }}" />
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <div class="form-outline">
                                                <label class="form-label">@lang('messages.email')</label>
                                                <input type="email" class="form-control" name="email"
                                                    value="{{ $embassies->email }}" />
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <div class="form-outline">
                                                <label class="form-label">@lang('messages.country')</label>
                                                <div class="dropdown">
                                                    <button class="form-control dropdown-toggle " type="button"
                                                        id="countryDropdown" data-toggle="dropdown" aria-haspopup="true"
                                                        aria-expanded="false">
                                                        Select Countries
                                                    </button>
                                                    <div class="dropdown-menu country-dropdown "
                                                        aria-labelledby="countryDropdown">
                                                        <div class="dropdown-item">
                                                            <input type="checkbox" id="select-all-countries"> Select All
                                                        </div>
                                                        @foreach ($countries as $country)
                                                            <div class="dropdown-item">
                                                                <input type="checkbox" name="supported_countries[]"
                                                                    value="{{ $country->id }}"
                                                                    {{ is_array($supportedCountries) && in_array($country->id, $supportedCountries) ? 'checked' : '' }}>
                                                                {{ $country->title }}
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="supported_countries" id="supported_countries"
                                        value="{{ $embassies->supported_countries }}">


                                    {{-- <script>
                                        $(document).ready(function() {
                                            $('#select-all-countries').change(function() {
                                                $('.dropdown-item input[type="checkbox"]').prop('checked', $(this).prop('checked'));
                                            });

                                            $('.dropdown-item input[type="checkbox"]').change(function() {
                                                var allChecked = $('.dropdown-item input[type="checkbox"]:checked').length === $(
                                                    '.dropdown-item input[type="checkbox"]').length;
                                                $('#select-all-countries').prop('checked', allChecked);
                                            });

                                            // Close dropdown on clicking outside
                                            $(document).on('click', function(e) {
                                                if (!$(e.target).closest('.dropdown').length) {
                                                    $('.dropdown-menu').removeClass('show');
                                                }
                                            });
                                        });
                                    </script> --}}

                                    <script>
                                        $(document).ready(function() {
                                            $('#select-all-countries').change(function() {
                                                $('.dropdown-item input[type="checkbox"]').prop('checked', $(this).prop('checked'));
                                                updateSelectedCountries();
                                            });

                                            $('.dropdown-item input[type="checkbox"]').change(function() {
                                                updateSelectedCountries();
                                            });

                                            function updateSelectedCountries() {
                                                var selectedCountries = [];
                                                if ($('#select-all-countries').prop('checked')) {
                                                    // If "Select All" is checked, add all country IDs
                                                    $('.dropdown-item input[type="checkbox"]').each(function() {
                                                        selectedCountries.push($(this).val());
                                                    });
                                                } else {
                                                    // Otherwise, add only the IDs of checked countries
                                                    $('.dropdown-item input[type="checkbox"]:checked').each(function() {
                                                        selectedCountries.push($(this).val());
                                                    });
                                                }
                                                $('#supported_countries').val(JSON.stringify(selectedCountries));
                                            }
                                        });
                                    </script>




                                    <div class="row">
                                        <div class="col-md-12 text-center">
                                            <button type="submit"
                                                class="btn rounded-pill btn-lg px-5 savebutton">@lang('messages.update')<i
                                                    class="fas fa-thin fa-angle-right p-1"></i></button>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection