@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('add_patient') }}"
               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>

            Add Blood Group
        </h5>
    </div>
</div>

@if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

{{-- Add Specialization Card --}}
<div class="card border-0 shadow-sm">

    <div class="card-header">
        <h5 class="mb-0">
            <i class="ti tabler-stethoscope me-2"></i>
            Add Blood Group
        </h5>
    </div>

    <div class="card-body">

        <form action="{{ route('store_group') }}"
      method="POST"
      id="bloodGroupForm">

            @csrf

            <div class="row">

                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Group
                        <span class="text-danger">*</span>
                    </label>

                    <input type="text"
                           name="group"
                           id="group"
                           class="form-control"
                           placeholder="Enter Group">

                    <div class="invalid-feedback"
                         id="error_group">
                    </div>

                </div>
            </div>

            <hr>

            {{-- Buttons --}}
            <div class="d-flex
                        justify-content-end
                        align-items-center
                        gap-2">

                <a href="{{ route('add_patient') }}"
                   class="btn btn-secondary">

                    <i class="ti tabler-x me-1"></i>
                    Cancel
                </a>

                <button type="submit"
                        class="btn btn-primary"
                        id="submitBtn">

                    <i class="ti tabler-device-floppy me-1"></i>

                    <span id="submitText">
                        Add
                    </span>
                </button>

            </div>

        </form>
    </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>
            Blood Group 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>Blood Group</th>
                        <th>Status</th>
                        <th>Created Date</th>
                    </tr>
                </thead>

                <tbody></tbody>
            </table>

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

{{-- Status Change Modal --}}
<div class="modal fade"
     id="statusModal"
     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">
                    Change Status
                </h5>

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

            </div>

            <div class="modal-body">

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


                <div class="mb-3">

                    <label class="form-label">
                        Blood Group
                    </label>

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

                </div>

                <div class="mb-3">

                    <label class="form-label">
                        Status
                        <span class="text-danger">*</span>
                    </label>

                    <select id="bloodGroupStatus"
                            class="form-select">

                        <option value="Active">
                            Active
                        </option>

                        <option value="Inactive">
                            Inactive
                        </option>

                    </select>

                    <div class="text-danger small mt-1"
                         id="error_status">
                    </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="updateStatusBtn">

                    <span id="updateStatusText">
                        Update Status
                    </span>
                </button>

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

<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
    });

    /*
    |--------------------------------------------------------------------------
    | Blood Group DataTable
    |--------------------------------------------------------------------------
    */
    const bloodGroupTable = $('#bloodGroupTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('blood_group_data') }}",
        columns: [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'group',
                name: 'group'
            },
            {
                data: 'status',
                name: 'status',
                orderable: false,
                searchable: false
            },
            {
                data: 'created_at',
                name: 'created_at'
            }
        ]
    });

    /*
    |--------------------------------------------------------------------------
    | Save Blood Group
    |--------------------------------------------------------------------------
    */
    $('#bloodGroupForm').on('submit', function (e) {

        e.preventDefault();

        let form = this;

        $('#group').removeClass('is-invalid');
        $('#error_group').text('');

        $('#submitBtn').prop('disabled', true);
        $('#submitText').text('Processing...');

        $.ajax({
            url: $(form).attr('action'),
            type: 'POST',
            data: new FormData(form),
            processData: false,
            contentType: false,

            success: function (response) {

                $('#submitBtn').prop('disabled', false);
                $('#submitText').text('Add');

                form.reset();

                bloodGroupTable.ajax.reload(null, false);

                Toast.fire({
                    icon: 'success',
                    title: response.message || 'Blood Group added successfully.'
                });

            },

            error: function (xhr) {

                $('#submitBtn').prop('disabled', false);
                $('#submitText').text('Add');

                if (xhr.status === 422 && xhr.responseJSON.errors) {

                    if (xhr.responseJSON.errors.group) {

                        $('#group').addClass('is-invalid');
                        $('#error_group').text(xhr.responseJSON.errors.group[0]);
                    }

                    return;
                }

                Toast.fire({
                    icon: 'error',
                    title: xhr.responseJSON?.message || 'Something went wrong.'
                });

            }

        });

    });

    /*
    |--------------------------------------------------------------------------
    | Open Status Modal
    |--------------------------------------------------------------------------
    */
    $(document).on('click', '.status-change-btn', function () {

        $('#statusBloodGroupId').val($(this).data('id'));
        $('#statusBloodGroupName').val($(this).data('name'));
        $('#bloodGroupStatus').val($(this).data('status'));

        $('#error_status').text('');

        const modal = bootstrap.Modal.getOrCreateInstance(
            document.getElementById('statusModal')
        );

        modal.show();

    });

    /*
    |--------------------------------------------------------------------------
    | Update Blood Group Status
    |--------------------------------------------------------------------------
    */
    $('#updateStatusBtn').on('click', function () {

        let bloodGroupId = $('#statusBloodGroupId').val();
        let status = $('#bloodGroupStatus').val();

        $('#error_status').text('');

        if (!status) {
            $('#error_status').text('Please select status.');
            return;
        }

        $('#updateStatusBtn').prop('disabled', true);
        $('#updateStatusText').text('Updating...');

        let updateUrl = "{{ route('blood_status_update', ':id') }}"
            .replace(':id', bloodGroupId);

        $.ajax({

            url: updateUrl,
            type: 'POST',

            data: {
                _token: "{{ csrf_token() }}",
                status: status
            },

            success: function (response) {

                $('#updateStatusBtn').prop('disabled', false);
                $('#updateStatusText').text('Update Status');

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

                bloodGroupTable.ajax.reload(null, false);

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

            },

            error: function (xhr) {

                $('#updateStatusBtn').prop('disabled', false);
                $('#updateStatusText').text('Update Status');

                if (xhr.status === 422) {

                    $('#error_status').text(
                        xhr.responseJSON?.errors?.status?.[0] || 'Invalid status.'
                    );

                    return;
                }

                Toast.fire({
                    icon: 'error',
                    title: xhr.responseJSON?.message || 'Status update failed.'
                });

            }

        });

    });

});
</script>

@endsection