@extends('admin.layouts.app')

@push('style')
<!-- third party css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<link href="{{asset('admin/assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('admin/assets/libs/datatables.net-select-bs5/css//select.bootstrap5.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-KzY5v3Z/y2mc6TBx1+YpwwBR2cM5GRFd4iEQjIqtsydLb9ncppntq62GK6ad4CCekfT0HTl4Z5BjUdgHmR4vww==" crossorigin="anonymous" />

@endpush

@section('content')
<section class="content home">
    <div class="block-header">

        <!-- Start Content-->
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box">
                        <div class="page-title-right">
                            <ol class="breadcrumb mb-4">
                                <li class="breadcrumb-item"><a href="{{route('admin-dashboard')}}">Animal Consultation</a></li>
                                <li class="breadcrumb-item active">Manage Shelter</li>
                            </ol>
                        </div>
                        <!-- <h4 class="page-title">PRODUCT LISTING</h4> -->
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <a href="{{ route('admin-add_shelter') }}" class="btn btn-primary mb-3 mt-2">Add Shelter</a>


                            @include('admin.common.flash')

                            <div class="form-outline">
                                <input type="text" id="search-input" class="form-control" placeholder="Search here" />
                            </div>

                            <table id="shelter-datatable" class="table dt-responsive nowrap w-100 mb-5" style="width:100%;">
                                <thead class="text">
                                    <tr>
                                        <th>#</th>
                                        <th>Shelter Name</th>
                                        <th>Address</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

                                <tbody class="text">

                                </tbody>
                            </table>

                        </div> <!-- end card body-->
                    </div> <!-- end card -->
                </div><!-- end col-->
            </div>
        </div> <!-- container -->

    </div> <!-- content -->

    </div>

    @endsection

    @push('script')
    <script>
        var table;

        $(document).ready(function() {

            table = $('#shelter-datatable').DataTable({
                searching: false,
                processing: true,
                serverSide: true,
                aaSorting: [
                    [0, 'asc']
                ],
                "ajax": {
                    type: 'GET',
                    url: '{{route("admin-get_shelter_listing")}}',
                    data: function(d) {
                        d.keyword = $('#search-input').val(); // Add keyword parameter for searching
                    }
                },
                columns: [{
                        data: 'id',
                        orderable: false,
                        visible: false,
                    },
                    {
                        data: 'name',
                        orderable: false,
                    },
                    {
                        data: 'address',
                        orderable: false,
                    },
                    {
                        data: 'status',
                        orderable: false,
                    },
                    {
                        data: 'action',
                        orderable: false,
                    },
                ],
            });
            $('#search-input').on('keyup', function() {
                table.search($(this).val()).draw();
            });

            $(document).on('click', '.change-status-button', function() {

                var shelterId = $(this).data('id');
                var status = $(this).data('status');
                var newStatus = status === 1 ? 0 : 1;

                // Show confirmation dialog using SweetAlert
                Swal.fire({
                    icon: 'question',
                    title: 'Confirmation',
                    text: 'Are you sure you want to change the status?',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No'
                }).then((result) => {
                    if (result.isConfirmed) {

                        $.ajax({
                            url: "{{ route('admin-change_shelter_status', ['id' => '__shelterId__']) }}".replace('__shelterId__', shelterId),
                            method: 'POST',
                            data: {
                                status: newStatus,
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {

                                Swal.fire({
                                    icon: 'success',
                                    title: 'Status Changed',
                                    text: response.message
                                });

                                // Refresh the DataTable to reflect the updated status
                                $('#shelter-datatable').DataTable().ajax.reload();
                            },
                            error: function(xhr) {
                                // Handle error response
                                console.log(xhr.responseText);
                            }
                        });
                    }
                });
            });

            $(document).on('click', '.delete-btn', function(e) {

                e.preventDefault();
                var rowId = $(this).data('id');

                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't to delete this Shelter Information!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then(function(result) {
                    if (result.isConfirmed) {
                        // Send AJAX request to delete the record
                        $.ajax({
                            url: '/admin/delete_shelter/' + rowId, // Replace with your delete route URL
                            type: 'POST',
                            dataType: 'json',
                            data: {
                                _token: '{{ csrf_token() }}',
                            },
                            success: function(response) {
                                // Handle success response
                                Swal.fire('Deleted!', 'The record has been deleted.', 'success').then(function() {
                                    $('#shelter-datatable').DataTable().ajax.reload();
                                });
                            },
                            error: function(xhr, status, error) {
                                // Handle error response
                                Swal.fire('Error!', 'An error occurred while deleting the record.', 'error');
                            }
                        });
                    }
                });
            });
        });
    </script>
    @endpush