@include('superadmin.header')

    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0">countries</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="/home/">Dashboard</a>
                                    </li>
                                    <li class="breadcrumb-item active">Countries List</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row">
                    <div class="col-lg-12">
                       
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">Countries List</h4>
                                </div><!-- end card header -->
                                                      
                                <div class="card-body">
                                    <div class="listjs-table" id="customerList">
                                    @include('superadmin.flashMsg')
                                        <div class="row g-4 mb-3">
                                            <div class="col-sm-auto">
                                                <div>
                                                    <a href="{{url('superadmin/countriesCreate')}}"
                                                        class="btn btn-success add-btn"><i
                                                            class="ri-add-line align-bottom me-1"></i> Add Country</a>

                                                    <!-- <button type="button" class="btn btn-success add-btn"
                                                    data-bs-toggle="modal" id="create-btn"
                                                    data-bs-target="#showModal"><i
                                                        class="ri-add-line align-bottom me-1"></i> Add Category</button> -->
                                                    <!-- <button class="btn btn-soft-danger" onClick="deleteMultiple()"><i
                                                        class="ri-delete-bin-2-line"></i></button> -->
                                                </div>
                                            </div>
                                            <div class="col-sm">
                                                <div class="d-flex justify-content-sm-end">
                                                    <div class="search-box ms-2">
                                                        <input type="text" class="form-control search"
                                                            placeholder="Search...">
                                                        <i class="ri-search-line search-icon"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="table-responsive table-card mt-3 mb-1">
                            
                                    <table class="table align-middle table-nowrap" id="customerTable">
                                               
                                        <thead class="table-light">
                                            <tr>
                                                <th class="sort" style="width: 100px;" data-sort="id">Sr No</th>
                                                <th class="sort" data-sort="customer_name">Country Title</th>
                                                <th class="sort" data-sort="email">Arabic Country Title</th>
                                                <!-- <th class="sort" data-sort="date">Created Date</th> -->
                                                <th class="sort" data-sort="phone">Status</th>
                                                <th class="sort" data-sort="action">Action</th>
                                            </tr>
                                       </thead>
                                            <tbody class="list form-check-all">
                                                 @foreach($Rowcountries as $key => $RowCategory)
                                                 @php $CatID= Crypt::encrypt($RowCategory->id); @endphp
                                                <tr scope="row">
                                                    <td class="id"> {{ $key + 1 }}</td>
                                                    <td class="customer_name">@if(isset($RowCategory->name)){{ $RowCategory->name }} @endif</td>
                                                    <td class="customer_name">@if(isset($RowCategory->ar_name)){{ $RowCategory->ar_name }} @endif</td>
                                                     <!-- <td>@if(isset($RowCategory->countriesyear)){{ $RowCategory->countriesyear }} @endif</td> -->
                                                    <!-- <td class="date">@if(isset($RowCategory->created_datetime)){{ $RowCategory->created_datetime }} @endif</td> -->
                                                    <td class="phone" id="status0{{$RowCategory->id}}">
                                                        @if($RowCategory->status==1 )
                                                        <div class="form-check form-switch       form-switch-success form-switch-lg" dir="ltr">
                                                            <input type="checkbox" class="form-check-input" id="customSwitchsizelg" checked="" onclick="setStatus('{{$RowCategory->id}}.');">
                                                        </div>
                                                                    <!-- <span class="badge badge-soft-success text-uppercase"><%=data[i].categoryStatus%></span> -->
                                                                @else
                                                                    <div class="form-check form-switch form-switch-danger form-switch-lg" dir="ltr">
                                                                        <input type="checkbox" class="form-check-input" id="customSwitchsizelg" onclick="setStatus('{{$RowCategory->id}}');">
                                                                    </div>
                                                                            <!-- <span class="badge badge-soft-danger text-uppercase"><%=data[i].categoryStatus%> </span> -->
                                                                @endif
                                                    </td>
                                                                
                                                        <td class="action">
                                                            
                                                            <div class="d-flex gap-2">
                                                                <div class="edit">
                                                                    <a class="link-success fs-15"
                                                                    href="{{url('superadmin/countriesEdit/'. $CatID) }}"><i class="ri-edit-2-line"></i></i></i>
                                                                    </a>

                                                                    <!-- <button class="btn btn-sm btn-success edit-item-btn" data-bs-toggle="modal" data-bs-target="#showModal">Edit</button> -->
                                                                
                                                                    <a class="link-danger fs-15"
                                                                    href="{{url('superadmin/deleteCountries/'. $CatID) }}" onClick='if(confirm("Do you want to delete this countries ?")){return true;}else{return false;}'">
                                                                    <i class="ri-delete-bin-line"></i>  </a>
                                                                    <!-- <button class="btn btn-sm btn-danger remove-item-btn" data-bs-toggle="modal" data-bs-target="#deleteRecordModal">Remove</button> -->
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                        @endforeach
                                            </tbody>
                                       </table>
                                            
                                            <div class="noresult" style="display: none">
                                                <div class="text-center">
                                                    <lord-icon src="https://cdn.lordicon.com/msoeawqm.json"
                                                        trigger="loop" colors="primary:#121331,secondary:#08a88a"
                                                        style="width:75px;height:75px"></lord-icon>
                                                    <h5 class="mt-2">Sorry! No Result Found</h5>
                                                    
                                                </div>
                                            </div>
                                        </div>

                                        <div class="d-flex justify-content-end">
                                            <div class="pagination-wrap hstack gap-2">
                                                <a class="page-item pagination-prev disabled" href="javascrpit:void(0)">
                                                    Previous
                                                </a>
                                                <ul class="pagination listjs-pagination mb-0"></ul>
                                                <a class="page-item pagination-next" href="javascrpit:void(0)">
                                                    Next
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div><!-- end card -->
                            </div>
                            <!-- end col -->
                    </div>
                    <!-- end col -->
                </div>
                <!-- end row -->

                <div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header bg-light p-3">
                                <h5 class="modal-title" id="exampleModalLabel">Add Category</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                    id="close-modal"></button>
                            </div>
                            <form class="category_form" autocomplete="off" method="POST">
                                <div class="modal-body">
                                    <div class="mb-3" id="modal-id" style="display: none;">
                                        <label for="id-field" class="form-label">ID</label>
                                        <input type="text" id="id-field" class="form-control" placeholder="ID" readonly
                                            name="id" />
                                    </div>

                                    <div class="mb-3">
                                        <label for="customername-field" class="form-label">Category Title</label>
                                        <input type="text" id="customername-field" class="form-control"
                                            placeholder="Enter Name" required name="title" />
                                        <div class="invalid-feedback">Please enter a category title.</div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="email-field" class="form-label">Category Image</label>
                                        <input type="file" id="email-field" class="form-control"
                                            placeholder="Enter Email" required name="img" />
                                        <div class="invalid-feedback">Please enter an email.</div>
                                    </div>

                                    <div>
                                        <label for="status-field" class="form-label">Status</label>
                                        <select class="form-control" data-trigger name="category_status"
                                            id="status-field" required>
                                            <option value="Active">Active</option>
                                            <option value="Inactive">Inactive</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class="hstack gap-2 justify-content-end">
                                        <button type="button" class="btn btn-light"
                                            data-bs-dismiss="modal">Close</button>
                                        <button type="submit" class="btn btn-success" id="add-btn">Add Category</button>
                                        <!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Modal -->
                <div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                    id="btn-close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mt-2 text-center">
                                    <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
                                        colors="primary:#f7b84b,secondary:#f06548"
                                        style="width:100px;height:100px"></lord-icon>
                                    <div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
                                        <h4>Are you Sure ?</h4>
                                        <p class="text-muted mx-4 mb-0">Are you Sure You want to Remove this Record ?
                                        </p>
                                    </div>
                                </div>
                                <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                                    <button type="button" class="btn w-sm btn-light"
                                        data-bs-dismiss="modal">Close</button>
                                    <button type="button" class="btn w-sm btn-danger " id="delete-record">Yes, Delete
                                        It!</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end modal -->

            </div>
            <!-- container-fluid -->
        </div>
        <script src="http://code.jquery.com/jquery-3.1.0.min.js"></script>        
        <script>
            function setStatus(id) {
                //alert(id);
                $.ajax({
                    url: "{{url('superadmin/countries/setStatus/')}}/"+id,
                    method: "GET",
                   success: function (data) {
                        //alert(data.status + data.btnStatus);    
                        if (data.status == 'success') {
                            if (data.btnStatus == 1) {
                                html = '<div class="form-check form-switch form-switch-success form-switch-lg" dir="ltr"><input type="checkbox" class="form-check-input" id="customSwitchsizelg" checked="" onclick="setStatus(' + id + ');"></div>';
                            }
                            else {
                                html = '<div class="form-check form-switch form-switch-danger form-switch-lg" dir="ltr"><input type="checkbox" class="form-check-input" id="customSwitchsizelg" onclick="setStatus(' + id + ');"></div>';
                            }
                            document.getElementById("status0" + id).innerHTML = html;
                        }
                        else {

                        }
                    }
                });
            }
        </script>
           @include('superadmin.footer')