@extends(
    session('staff_logged_in')
        ? 'Staff.layout'
        : 'Admin.layout'
)

@section('content')

<style>
    .dt-search,
    .dt-length,
    .dataTables_filter,
    .dataTables_length {
        display: none;
    }

    .card {
        border-radius: 18px;
    }

    .form-control,
    .form-select {
        min-height: 46px;
        border-radius: 10px;
    }

    .form-control:focus,
    .form-select:focus {
        box-shadow: none;
        border-color: #696cff;
    }

    .card-header {
        border-bottom: 1px solid #edf1f7;
    }

    .status-change-btn {
        border: none;
        cursor: pointer;
    }
</style>

<link rel="stylesheet"
      href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<div id="alertBox"
     style="display:none;">
</div>

{{-- Page Header --}}
<div class="row align-items-center
            justify-content-between
            mb-3 mt-3">

    <div class="col-auto">
        <h5 class="mb-0">

            <a href="{{ route('create_patient_full') }}"
               class="btn btn-icon bg-white me-2"
               style="box-shadow:0 9px 12px -2px #66328E1F;">

                <svg xmlns="http://www.w3.org/2000/svg"
                     width="24"
                     height="24"
                     viewBox="0 0 24 24"
                     fill="none"
                     stroke="#000"
                     stroke-width="2"
                     stroke-linecap="round"
                     stroke-linejoin="round">

                    <path stroke="none"
                          d="M0 0h24v24H0z"
                          fill="none"/>

                    <path d="M15 6l-6 6l6 6"/>
                </svg>
            </a>

            Address 
        </h5>
    </div>
</div>



{{-- Specialization List --}}
<div class="card mt-4 border-0 shadow-sm">

    <div class="card-header">
        <h5 class="mb-0">
            <i class="ti tabler-list me-2"></i>
            Address List
        </h5>
    </div>

    <div class="card-body">

        <div class="table-responsive">

            <table class="table table-bordered table-hover align-middle w-100"
       id="bloodGroupTable">

                <thead>
                    <tr>
                        <th>#</th>
                        <th>Places</th>
                        <th>Action</th>
                    </tr>
                </thead>

                <tbody></tbody>
            </table>

        </div>
    </div>
</div>

{{-- Edit Address Modal --}}
<div class="modal fade"
     id="addressModal"
     tabindex="-1"
     aria-hidden="true">

    <div class="modal-dialog modal-sm modal-dialog-centered">

        <div class="modal-content" style="border-radius:16px;">

            <div class="modal-header">

                <h5 class="modal-title">
                    Update Address
                </h5>

                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal">
                </button>

            </div>

            <div class="modal-body">

                <input type="hidden" id="addressId">

                <div class="mb-3">

                    <label class="form-label">
                        Address
                    </label>

                    <input type="text"
                           id="addressPlace"
                           class="form-control">

                    <div class="text-danger small mt-1"
                         id="error_place">
                    </div>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">

                    Cancel
                </button>

                <button type="button"
                        class="btn btn-primary"
                        id="updateAddressBtn">

                    <span id="updateAddressText">
                        Update Address
                    </span>

                </button>

            </div>

        </div>

    </div>

</div>
<form id="deleteAddressForm" method="POST" style="display:none;">
    @csrf
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

{{-- SweetAlert2 --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function () {

    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true
    });

    const bloodGroupTable = $('#bloodGroupTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('address_data') }}",
        columns: [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'place',
                name: 'place'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            },

        ]
    });

    $(document).on('click', '.edit-address', function () {

        $('#addressId').val($(this).data('id'));
        $('#addressPlace').val($(this).data('place'));

        $('#addressPlace').removeClass('is-invalid');
        $('#error_place').text('');

        bootstrap.Modal.getOrCreateInstance(
            document.getElementById('addressModal')
        ).show();

    });


    $('#updateAddressBtn').click(function () {

        let id = $('#addressId').val();

        $.ajax({
            url: "{{ route('address_update', ':id') }}".replace(':id', id),
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                place: $('#addressPlace').val()
            },

            beforeSend: function () {

                $('#updateAddressBtn').prop('disabled', true);

                $('#updateAddressText').html(`
                    <span class="spinner-border spinner-border-sm me-1"></span>
                    Updating...
                `);

            },

            success: function (response) {

                bootstrap.Modal.getInstance(
                    document.getElementById('addressModal')
                ).hide();

                $('#bloodGroupTable').DataTable().ajax.reload(null, false);

                Toast.fire({
                    icon: 'success',
                    title: response.message
                });

            },

            error: function (xhr) {

                if (xhr.status === 422) {

                    $('#addressPlace').addClass('is-invalid');

                    $('#error_place').text(
                        xhr.responseJSON.errors.place[0]
                    );

                }

            },

            complete: function () {

                $('#updateAddressBtn').prop('disabled', false);

                $('#updateAddressText').html(`
                    <i class="ti tabler-device-floppy me-1"></i>
                    Update Address
                `);

            }

        });

    });

    let deleteId = '';

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

        deleteId = $(this).data('id');

        $('#delete').modal('show');

    });

    $('#delete .btn-danger').click(function () {

        $(this)
            .prop('disabled', true)
            .html(`
                <span class="spinner-border spinner-border-sm me-1"></span>
                Processing...
            `);

        let url = "{{ route('address_delete', ':id') }}";
        url = url.replace(':id', deleteId);

        $('#deleteAddressForm')
            .attr('action', url)
            .submit();

    });
});
</script>

@endsection