<div>
    <div class="row">
        <div class="col-md-6 d-flex justify-content-between mt-2 mb-2">
            <h4 class="fw-bold "><span class="text-muted fw-light"></span> Countries</h4>
        </div>
    </div>
    <!-- Striped Rows -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive text-wrap">
                <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Sr.</th>
                        <th>Name</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @forelse ($countries as $key => $country)
                        <tr>
                            <td>{{$key+1}}</td>
                            <td>{{$country->name}}</td>
                            <td><span class="badge {{$country->status == 1 ? "bg-label-success": 'bg-label-primary'}}">
                                {{$country->status == 1 ? 'Enabled' : 'Disabled'}}</span>
                            </td>
                            <td width="10%">
                                <a href="javascript:;" wire:click="updateStatus({{$country->id}})" title="Change Status">
                                    @if($country->status == 1)
                                        <i class="bx bx-check btn btn-success btn-xs"></i>
                                    @else
                                        <i class="bx bx-x btn btn-warning btn-xs"></i>
                                    @endif
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center">No record found</td>
                        </tr>
                    @endforelse
                </tbody>
                </table>
                @if (count($countries) > 0)
                    <div>
                    {{ $countries->links('livewire.pagination') }}
                    </div>
                @endif
            </div>
        </div>
    </div>


</div>

@section('script')
<script type="text/javascript">
    $(document).ready(function(){

        $(".editTemplate").on('click', function(){
            var obj = $(this).data('obj');
            console.log(obj);

            $("#editForm .labelField").val(obj.label);
            $("#editForm .placeholderField").val(obj.placeholder);

            $("#editForm").attr('action', `{{route('admin.editEmailTemplate', '')}}/${obj.id}`)
            $("#editModal").modal('show')
        })
    });

    document.addEventListener('DOMContentLoaded', function () {

        $(".editAttribute").on('click', function(){
            let id = $(this).data('id');
            @this.call('selectItem', id);
        });

        Livewire.on('itemSelected', () => {
            console.log("in error");
            $("#editModal").modal('show')
        });

        Livewire.on('itemUpdated', () => {
            console.log("in error");
            $("#editModal").modal('hide')
        });

        Livewire.on('keepModalOpen', () => {
            $("#editModal").modal('show');
        });
    });
</script>
@endsection