@extends('layouts.master')

@section('content')

    {{-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css"> --}}
    {{-- <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script> --}}

    <div class="container-fluid p-5 bgImage" style="min-height: calc(100vh - 110px);">
        <section class="gradient-custom">
            <div class="card shadow-sm p-3 mb-5 bg-white rounded">
                <div class="card-body hometabel">
                    <h4 class="fw-bold mb-5 custom-heading">@lang('messages.embassy_list')</h4>

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

                    <table class="table" id="embassyTable">
                        <thead class="table-light">
                            <tr>
                                <th>@lang('messages.sno')</th>
                                <th>@lang('messages.embassy')</th>
                                <th>@lang('messages.street')</th>
                                <th>@lang('messages.city')</th>
                                <th>@lang('messages.state')</th>
                                <th>@lang('messages.zip_code')</th>
                                <th>@lang('messages.phone_extension')</th>
                                <th>@lang('messages.email')</th>
                                <th>@lang('messages.action')</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if ($embassies->isEmpty())
                                <tr>
                                    <td colspan="9">No data found.</td>
                                </tr>
                            @else
                                @foreach ($embassies as $key => $embassy)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $embassy->name }}</td>
                                        <td>{{ $embassy->appartment_number }}</td>
                                        <td>{{ $embassy->city }}</td>
                                        <td>{{ $embassy->state }}</td>
                                        <td>{{ $embassy->zip_code }}</td>
                                        <td>{{ $embassy->phone_extension }}</td>
                                        <td>{{ $embassy->email }}</td>
                                        <td>
                                            <a href="{{ route('editEmbassy', ['id' => $embassy->id]) }}"
                                                class="btn btn-sm btn-"><i class="fa-solid fa-pen"></i></a>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                    <script>
                        $(document).ready(function() {
                            $('#embassyTable').DataTable();
                        });
                    </script>

                </div>
            </div>
        </section>
    </div>
@endsection