@include('layouts/header')
<div class="container">
    <style>
        img,
        svg {
            vertical-align: middle !important;
            width: 40px !important;
            height: 40px !important;
        }
    </style>
    <div class="content">
        <div class="row">
            <div class="card p-3">
                <div class="col-sm-12">
                    <div class="filter-form">
                        <form method="get">
                            <div class="row">
                                <div class="col-md-8">
                                    <input type="text" class="form-control" placeholder="Search Your Name" name="search" id="search" value="{{ $search ?? ''}}">
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-primary" id="btnsearch" name="submit" width="80px">Search</button>
                                </div>
                                <div class="col-md-2">
                                    <a href="{{('country-list')}}" class="btn btn-secondary btn-block">Reset</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="card mt-2">
                <div class="row">
                    <div class="col-sm-12 p-4">
                        <form action="" method="POST">
                            <div class="card-box project-box pt-2">
                                <div class="row align-items-center">
                                    <div class="col-sm-5 col-md-5">
                                        <h5 class="total-data-count">Total Country (s): <strong class="text-primary">{{ $countries->total() }}</strong></h5>
                                    </div>
                                    <div class="col-sm-7 col-md-7 text-end">
                                        <a class="btn btn-outline-primary" type="button" href="{{url('add-country')}}"><span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span><span class="ms-1">Add Country</span></a>
                                    </div>
                                </div>

                                <div class="table-responsive mb-0 mt-2">
                                    <table class="table table-bordered fs--1">
                                        <thead>
                                            <tr>
                                                <th class="sl-no">S. No.</th>
                                                <th>Country </th>
                                                <th>Country Flag</th>
                                                <!-- <th class="action">Action</th> -->
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($countries as $data)
                                            <tr>
                                                <td>{{ $loop->index+1}}</td>
                                                <td>{{ $data->shortname }}</td>
                                                <td>
                                                    <img src="images/country/{{ $data->photo }}" class="rounded-circle" width="60" height="60">
                                                </td>
                                                <!-- <td>
                                                    <a href="product-view/{{ $data->id }}" class="text-black"><i class="fa fa-eye" aria-hidden="true"></i></a>

                                                    <a href="product-edit/{{ $data->id }}" class="text-black"><i class="fa fa-edit" aria-hidden="true"></i></a>

                                                    <a href="product-delete/{{ $data->id }}" class="text-black"><i class="fas fa-trash-alt" aria-hidden="true"></i></a>

                                                </td> -->

                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="d-flex d-title-box-block align-items-center justify-content-between footer-paging">
                                    <div class="">
                                        <!-- <a class="btn btn-primary btn-sm waves-effect width-md waves-light" href="{{('users-export') }}">
                                            <i class="fa fa-file-csv"></i> Export To CSV -->
                                        </a>
                                    </div>

                                    <div class="d-flex align-items-center justify-content-between" id="pagination">
                                        {{ $countries->links() }}
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
@include('layouts/footer')