@extends('layouts.admin')

@section('title','Hospital List')

@section('content')

<div class="container-fluid p-0">
    <!--title-->
    <div class="mb-3">
        <h1 class="h3 d-inline align-middle">Hospitals</h1>
    </div>

    <div class="mt-2 mt-md-0">
        <a href="{{ route('admin.hospitals.create') }}" class="btn btn-primary">Create Hospital</a>
    </div>

    <div class="col-md-6">
        <br>
        <!-- <div class="collapse navbar-collapse" id="navbarSearch">-->
            <form class="d-flex ms-auto" action="{{ route('admin.hospitals.index') }}" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" name="search" value="{{ $search}}"  aria-label="Search">
                <button class="btn btn-outline-primary" type="submit">Search</button>
            </form>
            <!--  </div>-->
        </div>
        <!--title-->

        <!--content-->

        <br>
        <div class="row">
            <div class="col-12 col-xl-12">
                <div class="card">
                    
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Hospital Name</th>
                                    <th>District</th>
                                    <th> Status</th>
                                    <th>Actions</th>                                                                                                
                                </tr>
                            </thead>
                            <tbody>                                      

                                @forelse($hospitals as $hospital)


                                <tr>
                                    <td>{{ $loop->iteration + ($hospitals->currentPage() - 1) * $hospitals->perPage() }}</td>
                                    <td>{{ $hospital->name }}</td>
                                    <td>{{ $hospital->district->district ?? 'N/A' }}</td>
                                    
                                    <td>@if($hospital->status==1)<div class="alert alert-success">Active</div> @else  <div class="alert alert-danger">Inactive</div>@endif</td>
                                    
                                    
                                    <td class="table-action">
                                        <a href="{{ route('admin.hospitals.edit', Crypt::encryptString($hospital->id)) }}">
                                            <i class="align-middle" data-feather="edit-2"></i>
                                        </a>
                                        


                                        <a href="javascript:void(0);" 
                                        class="toggle-hospital-status"
                                        data-hospital-id="{{ Crypt::encryptString($hospital->id) }}"
                                        data-status="{{ $hospital->status }}"
                                        >

                                        @if ($hospital->status == 1)
                                        <i class="align-middle me-2 fas fa-fw fa-ban" title="Deactivate" style="color: inherit;"></i>
                                        @else
                                        <i class="align-middle me-2 fas fa-fw fa-check" title="Activate" style="color: inherit;"></i>
                                        @endif
                                    </a>

                                </td>
                            </tr>                                        
                            @empty
                            <tr><td colspan="7" class="text-center">No hospitals found.</td></tr>
                            @endforelse
                            
                        </tbody>
                    </table>

                    <div class="d-flex justify-content-center">
                        {{ $hospitals->links() }}
                    </div>
                </div>

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

</div>
@endsection


@push('scripts')
<script>
    $(document).ready(function() {

        $(document).on('click', '.editHospital', function() {
            let id = $(this).data('id');

            $.ajax({
                url: "{{ url('admin/hospitals') }}/" + id + "/edit",
                type: 'GET',
                beforeSend: function() {
                    Swal.fire({
                        title: 'Loading...',
                        text: 'Fetching hospital details',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });
                },
                success: function(response) {
                    Swal.close();

                    if (response.success) {
                        let hospital = response.data;

                        Swal.fire({
                            title: 'Edit Hospital',
                            html: `
                            <input id="edit_name" class="swal2-input" placeholder="Hospital Name" value="${hospital.name}">
                                `,
                                showCancelButton: true,
                                confirmButtonText: 'Update',
                                preConfirm: () => {
                                    const newName = $('#edit_name').val().trim();
                                    if (!newName) {
                                        Swal.showValidationMessage('Hospital name is required');
                                        return false;
                                    }
                                    return { name: newName };
                                }
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    updateHospital(id, result.value.name);
                                }
                            });

                        } else {
                            Swal.fire('Error', response.message, 'error');
                        }
                    },
                    error: function() {
                        Swal.close();
                        Swal.fire('Error', 'Unable to fetch hospital details.', 'error');
                    }
                });
        });


        function updateHospital(id, name) {
            $.ajax({
                url: "{{ url('admin/hospitals') }}/" + id + "/update",
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    name: name
                },
                beforeSend: function() {
                    Swal.fire({
                        title: 'Updating...',
                        text: 'Please wait',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });
                },
                success: function(response) {
                    Swal.close();

                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Updated!',
                            text: response.message,
                            timer: 1500,
                            showConfirmButton: false
                        });

                    // Optionally reload table or row
                        setTimeout(() => location.reload(), 1500);
                    } else {
                        Swal.fire('Error', response.message, 'error');
                    }
                },
                error: function(xhr) {
                    Swal.close();
                    Swal.fire('Error', 'Something went wrong while updating.', 'error');
                }
            });
        }

    });

    $(document).on('click', '.toggleStatusHospital', function() {
        let button = $(this);
        let hospitalId = button.data('id');
        let currentStatus = button.data('status');
        let actionText = currentStatus == 1 ? 'deactivate' : 'activate';

        Swal.fire({
            title: 'Are you sure?',
            text: `Do you want to ${actionText} this hospital?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: `Yes, ${actionText} it!`
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ url('admin/hospitals') }}/" + hospitalId,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                    _method: 'DELETE' // still calls destroy
                },
                beforeSend: function() {
                    Swal.fire({
                        title: `${actionText.charAt(0).toUpperCase() + actionText.slice(1)}...`,
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });
                },
                success: function(response) {
                    Swal.close();
                    if (response.success) {
                        // Update status badge dynamically
                        let statusLabel = button.closest('tr').find('.status-label span');
                        if (currentStatus == 1) {
                            statusLabel.removeClass('bg-success').addClass('bg-danger').text('Inactive');
                            button.data('status', 0);
                            button.attr('title', 'Activate Hospital');
                        } else {
                            statusLabel.removeClass('bg-danger').addClass('bg-success').text('Active');
                            button.data('status', 1);
                            button.attr('title', 'Deactivate Hospital');
                        }

                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message,
                            timer: 1500,
                            showConfirmButton: false
                        });
                    } else {
                        Swal.fire('Error', response.message, 'error');
                    }
                },
                error: function(xhr) {
                    Swal.close();
                    Swal.fire('Error', 'Something went wrong while updating status.', 'error');
                }
            });
            }
        });
    });


    $(document).on("click", ".toggle-hospital-status", function () {

        let button = $(this);
        let hospital = button.data("hospital-id");
    let status = button.data("status"); // 1 = active, 0 = inactive

    let action = status == 1 ? "deactivate" : "activate";
    let actionText = action.charAt(0).toUpperCase() + action.slice(1);

    Swal.fire({
        title: "Are you sure?",
        text: `Do you want to ${action} this hospital?`,
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: `Yes, ${actionText}`
    }).then((result) => {

        if (result.isConfirmed) {

            $.ajax({
                headers: { "X-CSRF-TOKEN": "{{ csrf_token() }}" },
                url: "{{ url('admin/master-management/hospitals') }}/" + hospital + "/toggle-status",
                type: "POST",
                data: { hospital: hospital },
                success: function(response) {

                    if (response.status == "success") {

                        Swal.fire({
                            title: actionText,
                            text: response.message,
                            icon: "success",
                            timer: 1500,
                            showConfirmButton: true
                        });

                        let statusCell = button.closest("tr").find("td:nth-child(3)");

                        if (status == 1) {

                            statusCell.html('<div class="alert alert-danger">Inactive</div>');
                            button.data("status", 0);

                            button.html('<i data-feather="check" class="text-success" title="Activate"></i>');

                        } else {

                            statusCell.html('<div class="alert alert-success">Active</div>');
                            button.data("status", 1);

                            button.html('<i data-feather="slash" class="text-danger" title="Deactivate"></i>');
                        }

                        feather.replace();
                    } 
                    else {
                        Swal.fire("Error", response.message, "error");
                    }
                },
                error: function() {
                    Swal.fire("Error", "Something went wrong", "error");
                }
            });
        }
    });
});



</script>
@endpush