@extends('layouts.master')

@section('title', 'Express54')

@section('content')

    <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">

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

                    <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="countryBanner">
                        <thead class="table-light">
                            <tr>
                                <th>@lang('messages.sno')</th>
                                <th>@lang('messages.Name')</th>
                                <th>@lang('messages.status')</th>
                                <th>@lang('messages.country_code')</th>
                                <th>@lang('messages.banner_image')</th>
                                <th>@lang('messages.color_code')</th>
                                <th>@lang('messages.hover_color')</th>
                                <th>@lang('messages.action')</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if ($countries->isEmpty())
                                <tr>
                                    <td colspan="8">No data found.</td>
                                </tr>
                            @else
                                @foreach ($countries as $key => $country)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $country->title }}</td>
                                        <td>{{ $country->status }}</td>
                                        <td>{{ $country->country_code }}</td>
                                        <td>{{ $country->banner_image }}</td>
                                        <td>{{ $country->color_code }}</td>
                                        <td>{{ $country->hover_color }}</td>
                                        <td>
                                            <a href="{{ route('editcountryBanner', ['id' => $country->id]) }}"
                                                class="btn btn-sm btn-"><i class="fa-solid fa-pen"></i></a>
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                    <script>
                        $(document).ready(function() {
                            $('#countryBanner').DataTable();
                        });
                    </script>
                </div>
            </div>
        </section>
    </div>
@endsection