@extends('admin.layout.main')

@section('content')
    @push('meta')
        <meta name="csrf-token" content="{{ csrf_token() }}">
    @endpush

    @push('styles')
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    @endpush

    <div class="breadcrumbbar">
        <div class="row align-items-center">
            <div class="col-md-8 col-lg-8">
                <div class="breadcrumb-list">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('status_list') }}">Students</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Students List</li>
                    </ol>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="widgetbar">
                    <button class="btn btn-primary-rgba" id="addStudent">Add Students</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Start Contentbar -->
    <div class="contentbar">
        <div class="row">
            <div class="col-lg-12">
                <div class="card m-b-30">
                    <div class="card-header">
                        <h5 class="card-title">Students Table</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="overflow-x: scroll">
                            <table id="student_table" class="table-bordered  display table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Registration #</th>
                                        <th>phone</th>
                                        <th>cnic</th>
                                        <th>address</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Student Modal -->
    <div class="modal fade" id="createStudentModal" tabindex="-1" role="dialog" aria-labelledby="createStudentModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createStudentModalLabel">Add Student</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="createStudentForm">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone</label>
                            <input type="number" class="form-control" name="phone" required>
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" name="password" required>
                        </div>

                        <div class="form-group">
                            <label for="cnic">CNIC</label>
                            <input type="number" class="form-control" name="cnic" required>
                        </div>
                        <div class="form-group">
                            <label for="address">Address</label>
                            <input type="text" class="form-control" name="address" placeholder="1234 Main St">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Add</button>
                    </div>

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


    <div class="modal fade" id="updateStudentModal" tabindex="-1" role="dialog" aria-labelledby="updateStudentModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateStudentModalLabel">Update Student</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="updateStudentForm">
                <div class="modal-body">
                    <input type="hidden" id="student_id" name="student_id">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name_update" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email_update" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone</label>
                        <input type="number" class="form-control" id="phone_update" name="phone" required>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" name="password" required>
                    </div>

                    <div class="form-group">
                        <label for="cnic">CNIC</label>
                        <input type="number" class="form-control" id="cnic_update" name="cnic" required>
                    </div>
                    <div class="form-group">
                        <label for="address">Address</label>
                        <input type="text" class="form-control" id="address_update" name="address"
                            placeholder="1234 Main St">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>

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



    @push('scripts')
        <script>
            $(document).ready(function() {
                var table = $('#student_table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ route('student_list') }}',
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'email',
                            name: 'email'
                        },
                        {
                            data: 'registration_number',
                            name: 'registration_number'
                        },
                        {
                            data: 'phone',
                            name: 'phone'
                        },
                        {
                            data: 'cnic',
                            name: 'cnic'
                        },
                        {
                            data: 'address',
                            name: 'address'
                        },
                        {
                            data: null,
                            name: 'action',
                            render: function(data, type, row) {
                                return `
                        <button type="button" class="btn btn-round btn-secondary" data-id="${row.id}" id="editStudent"><i class="feather icon-edit"></i></button>
                        <button type="button" class="btn btn-round btn-danger" data-id="${row.id}" id="deleteStudent"><i class="feather icon-trash-2"></i></button>
                    `;
                            }
                        }
                    ]
                });

                $('#addStudent').on('click', function() {
                    $('#createStudentModal').modal('show');
                });

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

                    $.ajax({
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('add_student_form') }}",
                        data: $(this).serialize(),
                        success: function(response) {
                            if (response.success) {
                                $('#createStudentModal').modal('hide');
                                $('#student_table').DataTable().ajax.reload();
                                Swal.fire('Added!', 'The Student has been added.', 'success');
                                $('#createStudentForm')[0].reset();
                            } else {
                                Swal.fire('Error!', response.message, 'error');
                            }
                        },
                        error: function(xhr) {
                            if (xhr.status === 422) { // Unprocessable Entity (Validation errors)
                                let errors = xhr.responseJSON.errors;
                                let errorMessage = '';
                                for (let field in errors) {
                                    errorMessage += errors[field].join('<br>');
                                }
                                Swal.fire('Validation Error!', errorMessage, 'error');
                            } else {
                                let message = 'Something went wrong.';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    message = xhr.responseJSON.message;
                                }
                                Swal.fire('Error!', message, 'error');
                            }
                        }
                    });
                });

                $('body').on('click', '#deleteStudent', function() {
                    var id = $(this).data('id');

                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        // Use 'warning' for better visibility
                        showCancelButton: true,

                        confirmButtonText: 'Yes, delete it!',
                        cancelButtonText: 'No, cancel!',

                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                type: "DELETE",
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                url: "{{ route('delete_student', ['id' => ':id']) }}"
                                    .replace(':id', id),
                                success: function(response) {
                                    table.ajax.reload();
                                    Swal.fire('Deleted!',
                                        'The Student has been deleted.', 'success');
                                },
                                error: function(xhr) {
                                    Swal.fire('Error!', 'An error occurred.', 'error');
                                }
                            });
                        }
                    });
                });
                $('body').on('click', '#editStudent', function() {
                    var id = $(this).data('id');
                    $.ajax({
                        type: "GET",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('get_student', ['id' => ':id']) }}".replace(':id', id),
                        success: function(response) {
                            if (response.status == 404) {
                                Swal.fire('Error!', response.message, 'error');
                                $('#updateStudentModal').modal('hide');
                            } else {
                                var student = response.data;
                                $('#updateStudentModal').modal('show');
                                $('#student_id').val(student.data.id);
                                $('#name_update').val(student.data.name);
                                $('#email_update').val(student.data.email);
                                $('#phone_update').val(student.data.phone);
                                $('#cnic_update').val(student.data.cnic);
                                $('#address_update').val(student.data.address);
                            }
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', 'Something went wrong.', 'error');
                        }
                    });
                });
                $('#updateStudentForm').on('submit', function(e) {
                    e.preventDefault();
                    var id = $('#student_id').val(); // Ensure this is set correctly

                    $.ajax({
                        type: 'PUT',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('update_student_form', ['id' => ':id']) }}".replace(':id', id),
                        data: $(this).serialize(),
                        success: function(response) {
                            if (response.success) {
                                $('#updateStudentModal').modal('hide');
                                table.ajax
                                    .reload(); // Ensure 'table' is defined and refers to your DataTable instance
                                Swal.fire('Updated!', response.message, 'success');
                                $('#updateStudentForm')[0].reset();
                            } else {
                                Swal.fire('Error!', response.message, 'error');
                            }
                        },
                        error: function(xhr) {
                            if (xhr.status === 422) { // Unprocessable Entity (Validation errors)
                                let errors = xhr.responseJSON.errors;
                                let errorMessage = '';
                                for (let field in errors) {
                                    errorMessage += errors[field].join('<br>');
                                }
                                Swal.fire('Validation Error!', errorMessage, 'error');
                            } else {
                                let message = 'Something went wrong.';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    message = xhr.responseJSON.message;
                                }
                                Swal.fire('Error!', message, 'error');
                            }
                            console.log(xhr);
                        }
                    });
                });
            });
        </script>
    @endpush
@endsection