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

@section('content')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
<div id="alertBox" style="display:none;"></div>
<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('doctor_list') }}">
                    <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"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            Create Specialization
        </h5>
    </div>
</div>

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

<div class="card border-0 shadow-sm">
    <div class="card-header">
        <h5><i class="ti tabler-calendar-event me-2"></i>Add Specialization</h5>
    </div>

    <div class="card-body">
      <form action="{{ route('store_specialization') }}" method="POST" id="specializationForm">
    @csrf

    <div class="section-title mb-4">
        <h5>
            <i class="ti tabler-stethoscope me-2"></i>
            Specialization Details
        </h5>
    </div>

    <div class="row">

        <div class="col-md-6 mb-3">
            <label class="form-label">
                Specialization Name *
            </label>

            <input
                type="text"
                name="specialization_name"
                class="form-control @error('specialization_name') is-invalid @enderror"
                placeholder="Enter Specialization">

            @error('specialization_name')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
            @enderror
        </div>

    </div>

    <hr>

    <div class="text-center">

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

    <button type="submit" class="btn btn-primary" id="submitBtn">
    <i class="ti tabler-device-floppy me-1"></i>
    <span id="submitText">Save Specialization</span>
</button>
    </div>

</form>
<div class="card mt-4 border-0 shadow-sm">
    <div class="card-header">
        <h5>
            <i class="ti tabler-list me-2"></i>
            Specialization List
        </h5>
    </div>

    <div class="card-body">

        <div class="table-responsive">

            <table class="table table-bordered align-middle" id="specializationTable">

                <thead>
                    <tr>
                        <th>#</th>
                        <th>Specialization</th>
                        <th>Created Date</th>
                        <th>Action</th>
                    </tr>
                </thead>

            </table>

        </div>

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

<style>
.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;
}

.section-title {
    border-left: 4px solid #696cff;
    padding-left: 12px;
}

.section-title h5 {
    margin: 0;
    font-weight: 700;
}

.card-header {
    border-bottom: 1px solid #edf1f7;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {

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

    $('#specializationForm').on('submit', function (e) {
        e.preventDefault();

        $('.is-invalid').removeClass('is-invalid');
        $('.invalid-feedback').remove();

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

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

            success: function (response) {

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

                $('#specializationForm')[0].reset();

                $('#submitBtn').prop('disabled', false);
                $('#submitText').text('Save Specialization');
            },

            error: function (xhr) {

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

                if (xhr.status === 422) {

                    $.each(xhr.responseJSON.errors, function (key, value) {
                        $('[name="' + key + '"]').addClass('is-invalid');
                        $('[name="' + key + '"]').after(
                            '<div class="invalid-feedback">' + value[0] + '</div>'
                        );
                    });

                } else {

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

                }
            }
        });
    });

});
</script>
<script>
$(document).ready(function () {

    $('#specializationTable').DataTable({

        processing: true,
        serverSide: true,

        ajax: {
            url: "{{ route('specialization_list_data') }}",
            type: "GET",

            dataSrc: function (json) {

                console.log("DataTable Response:", json);
                console.log("Rows:", json.data);

                return json.data;
            },

            error: function (xhr, error, thrown) {
                console.log("AJAX Error:", xhr);
                console.log("Status:", xhr.status);
                console.log("Response:", xhr.responseText);
            }
        },

        columns: [
            {
                data: null,
                render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                },
                orderable: false,
                searchable: false
            },
            { data: 'specialization_name', name: 'specialization_name' },
            { data: 'created_at', name: 'created_at' },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            }
        ]

    });

});


$(document).on('click', '.deleteSpecialization', function () {

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

    Swal.fire({
        title: 'Are you sure?',
        text: 'You want to delete this specialization.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, Delete'
    }).then((result) => {

        if (result.isConfirmed) {

            $.ajax({
                url: "{{ route('delete_specialization') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: id
                },

                success: function (response) {

                    Swal.fire({
                        icon: 'success',
                        title: response.message,
                        timer: 2000,
                        showConfirmButton: false
                    });

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

                error: function () {

                    Swal.fire({
                        icon: 'error',
                        title: 'Something went wrong.'
                    });

                }
            });

        }

    });

});
</script>


@endsection