@extends('admin.layout.main')

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

    @push('styles')
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
    @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('trials_list') }}">Trials</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Trials List</li>
                    </ol>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="widgetbar">
                    <button class="btn btn-primary-rgba" id="addTrial">Add Trials</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Trial Modal -->
    <div class="modal fade" id="createTrial" tabindex="-1" role="dialog" aria-labelledby="createTrialModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createTrialModalLabel">Add Trial</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="createTrialForm">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                            <div class="invalid-feedback" id="name-error"></div>
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone number</label>
                            <input type="number" class="form-control" id="phone" name="phone" required>
                            <div class="invalid-feedback" id="phone-error"></div>
                        </div>
                        <div class="form-group">
                            <label for="lead_manager">Manager</label>
                            <input type="text" class="form-control" id="lead_manager" name="lead_manager" required>
                            <div class="invalid-feedback" id="lead_manager-error"></div>
                        </div>
                        <div class="form-group">
                            <label for="next_follow_up">Next Follow Up</label>
                            <input type="datetime-local" class="form-control" id="next_follow_up" name="next_follow_up"
                                required>
                            <div class="invalid-feedback" id="next_follow_up-error"></div>
                        </div>
                        <div class="form-group">
                            <label for="status_id">Status</label>
                            <select name="status_id" id="status_id" class="form-control" required>
                                <option selected disabled>Select Status</option>
                                @foreach ($statuses as $status)
                                    <option value="{{ $status['id'] }}">{{ $status['status'] }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback" id="status_id-error"></div>
                        </div>
                        <div class="form-group">
                            <label for="trial_teacher_id">Trial Teacher</label>
                            <select name="trial_teacher_id" class="form-control" required>
                                <option selected disabled>Select Teacher</option>
                                @foreach ($teachers as $teacher)
                                    <option value="{{ $teacher['id'] }}">{{ $teacher['name'] }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback" id="trial_teacher_id-error"></div>
                        </div>
                        <div class="form-group">
                            <label for="trial_course_id">Trial Course</label>
                            <select name="trial_course_id" class="form-control" required>
                                <option selected disabled>Select Course</option>
                                @foreach ($courses as $course)
                                    <option value="{{ $course['id'] }}">{{ $course['name'] }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback" id="trial_course_id-error"></div>
                        </div>
                        <div class="form-group">
                            <label for="trial_time">Trial Time</label>
                            <input type="datetime-local" class="form-control" id="trial_time" name="trial_time" required>
                            <div class="invalid-feedback" id="trial_time-error"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Add</button>
                    </div>
                </form>
            </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">Trials Table</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="overflow-x: scroll">
                            <table id="trial_table" class="table-bordered display table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Lead</th>
                                        <th>Course </th>
                                        <th>Teacher</th>
                                        <th>Trial Time</th>
                                        <td>Actions</td>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="updateTrialModal" tabindex="-1" role="dialog" aria-labelledby="updateTrialModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateTrialModalLabel">Update Trial</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="updateTrialForm">
                    <div class="modal-body">
                        <input type="hidden" id="trial_id" name="trial_id">
                        <input type="hidden" id="lead_id" name="lead_id">

                        <div class="form-group">
                            <label for="trial_teacher_id">Trial Teacher</label>
                            <select name="teacher_id" id="trial_teacher_id" class="form-control" required>
                                <option value="" selected disabled>Select Teacher</option>
                                @foreach ($teachers as $teacher)
                                    <option value="{{ $teacher['id'] }}">{{ $teacher['name'] }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group">
                            <label for="trial_update_course">Trial Course</label>
                            <select name="course_id" id="trial_update_course" class="form-control" required>
                                <option selected disabled>Select Course</option>
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group">
                            <label for="update_trial_time">Trial Time</label>
                            <input type="datetime-local" class="form-control" id="update_trial_time" name="trial_time"
                                required>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    @push('scripts')
        <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>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone-with-data.min.js"></script>
        <script>
            $(document).ready(function() {
                var table = $('#trial_table').DataTable({
                    processing: false,
                    serverSide: false,
                    ajax: "{{ route('trials_list') }}",
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'lead_name',
                            name: 'lead_name'
                        },
                        {
                            data: 'course_name',
                            name: 'course_name'
                        },
                        {
                            data: 'teacher_name',
                            name: 'teacher_name'
                        },
                        {
                            data: 'trial_time',
                            name: 'trial_time',
                            render: function(data) {
                                return moment(data).format('DD MMM YYYY, hh:mm A');
                            }
                        },

                        {
                            data: null,
                            name: 'action',
                            render: function(data, type, row) {
                                return `
                <button type="button" class="btn btn-round btn-secondary" data-id="${row.id}" id="editTrial"><i class="feather icon-edit"></i></button>
                <button type="button" class="btn btn-round btn-danger" data-id="${row.id}" id="deleteTrial"><i class="feather icon-trash-2"></i></button>
            `;
                            }
                        }
                    ]
                });
                $('body').on('click', '#deleteTrial', 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_trial', ['id' => ':id']) }}"
                                    .replace(':id', id),
                                success: function(response) {
                                    table.ajax.reload();
                                    Swal.fire('Deleted!',
                                        'The Trial has been deleted.', 'success');
                                },
                                error: function(xhr) {
                                    Swal.fire('Error!', 'An error occurred.', 'error');
                                }
                            });
                        }
                    });
                });

                $('#addTrial').on('click', function() {
                    $('#createTrial').modal('show');
                });

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

                    let formData = new FormData(this);

                    // Convert 'next_follow_up' to the desired format
                    let nextFollowUp = $('#next_follow_up').val();
                    let localDateNextFollowUp = new Date(nextFollowUp);
                    let utcDateNextFollowUp = new Date(Date.UTC(
                        localDateNextFollowUp.getFullYear(),
                        localDateNextFollowUp.getMonth(),
                        localDateNextFollowUp.getDate(),
                        localDateNextFollowUp.getHours(),
                        localDateNextFollowUp.getMinutes(),
                        localDateNextFollowUp.getSeconds()
                    ));
                    let formattedNextFollowUp = utcDateNextFollowUp.toISOString().slice(0, 19).replace('T',
                        ' ');

                    // Convert 'trial_time' to the desired format
                    let trialTime = $('#trial_time').val();
                    let localDateTrialTime = new Date(trialTime);
                    let utcDateTrialTime = new Date(Date.UTC(
                        localDateTrialTime.getFullYear(),
                        localDateTrialTime.getMonth(),
                        localDateTrialTime.getDate(),
                        localDateTrialTime.getHours(),
                        localDateTrialTime.getMinutes(),
                        localDateTrialTime.getSeconds()
                    ));
                    let formattedTrialTime = utcDateTrialTime.toISOString().slice(0, 19).replace('T', ' ');

                    formData.append('next_follow_up', formattedNextFollowUp);
                    formData.append('trial_time', formattedTrialTime);

                    // Disable the submit button
                    let submitButton = $('#createTrialForm').find('button[type="submit"]');
                    submitButton.prop('disabled', true);

                    $.ajax({
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('add_trial_form') }}",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.success) {
                                $('#createTrial').modal('hide');
                                $('#trial_table').DataTable().ajax.reload();
                                Swal.fire('Added!', response.message, 'success');
                                $('#createTrialForm')[0].reset();
                                // Clear previous error messages
                                $('.invalid-feedback').empty();
                                $('.form-control').removeClass('is-invalid');
                            } else {
                                // Clear previous error messages
                                $('.invalid-feedback').empty();
                                $('.form-control').removeClass('is-invalid');

                                // Display new error messages
                                if (response.errors) {
                                    $.each(response.errors, function(field, messages) {
                                        let errorElement = $('#' + field + '-error');
                                        errorElement.html(messages.join('<br>'));
                                        $('#' + field).addClass('is-invalid');
                                    });
                                }
                                Swal.fire('Error!', response.message, 'error');
                            }
                        },
                        error: function(xhr) {
                            // Clear previous error messages
                            $('.invalid-feedback').empty();
                            $('.form-control').removeClass('is-invalid');

                            let message = 'Something went wrong.';
                            if (xhr.status === 422) { // Unprocessable Entity (Validation errors)
                                let errors = xhr.responseJSON.errors;
                                $.each(errors, function(field, messages) {
                                    let errorElement = $('#' + field + '-error');
                                    errorElement.html(messages.join('<br>'));
                                    $('#' + field).addClass('is-invalid');
                                });
                               
                            } else if (xhr.responseJSON && xhr.responseJSON.message) {
                                message = xhr.responseJSON.message;
                            }
                       
                        },
                        complete: function() {
                            // Re-enable the submit button after request completes
                            submitButton.prop('disabled', false);
                        }
                    });
                });

                $('body').on('click', '#editTrial', function() {
                    var id = $(this).data('id');
                    $.ajax({
                        type: "GET",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('get_trial', ['id' => ':id']) }}".replace(':id', id),
                        success: function(response) {
                            if (response.status == 404) {
                                Swal.fire('Error!', response.message, 'error');
                                $('#updateTrialModal').modal('hide');
                            } else {
                                var trials = response.trials;
                                $('#updateTrialModal').modal('show');
                                $('#trial_id').val(trials.data.id);
                                $('#lead_id').val(trials.data.lead_id);
                                $('#trial_update_course').val(trials.data
                                    .course_id); // Corrected field
                                $('#update_trial_time').val(trials.data.trial_time);
                                populateCourseDropdown(trials.data.lead_courses);
                            }
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', 'Something went wrong.', 'error');
                        }
                    });
                });

                // Function to populate course dropdown
                function populateCourseDropdown(courses) {
                    let courseSelect = $('#trial_update_course');
                    courseSelect.empty(); // Clear existing options
                    courseSelect.append('<option selected disabled>Select Course</option>'); // Add default option
                    courses.forEach(function(course) {
                        courseSelect.append('<option value="' + course.course_id + '">' + course.course_name +
                            '</option>');
                    });
                }

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

                    // Clear previous error messages
                    $('.invalid-feedback').empty();
                    $('.form-control').removeClass('is-invalid');

                    // Perform client-side validation
                    let isValid = true;

                    if ($('#trial_teacher_id').val() === '' || $('#trial_teacher_id').val() === null) {
                        $('#trial_teacher_id').addClass('is-invalid');
                        $('#trial_teacher_id').next('.invalid-feedback').text('Please select a teacher');
                        isValid = false;
                    }

                    if ($('#trial_update_course').val() === '' || $('#trial_update_course').val() === null) {
                        $('#trial_update_course').addClass('is-invalid');
                        $('#trial_update_course').next('.invalid-feedback').text('Please select a course');
                        isValid = false;
                    }

                    if (!isValid) {
                        return; // Stop form submission if validation fails
                    }

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

                    // Convert 'update_trial_time' to the desired format
                    let trialTime = $('#update_trial_time').val();
                    let localDateTrialTime = new Date(trialTime);
                    let utcDateTrialTime = new Date(Date.UTC(
                        localDateTrialTime.getFullYear(),
                        localDateTrialTime.getMonth(),
                        localDateTrialTime.getDate(),
                        localDateTrialTime.getHours(),
                        localDateTrialTime.getMinutes(),
                        localDateTrialTime.getSeconds()
                    ));
                    let formattedTrialTime = utcDateTrialTime.toISOString().slice(0, 19).replace('T', ' ');

                    let data = {
                        lead_id: $('#lead_id').val(),
                        teacher_id: $('#trial_teacher_id').val(),
                        course_id: $('#trial_update_course').val(),
                        trial_time: formattedTrialTime
                    };

                    console.log('Sending data:', data); // Debug log

                    let submitButton = $(this).find('button[type="submit"]');
                    submitButton.prop('disabled', true);

                    $.ajax({
                        type: 'PUT',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                            'Content-Type': 'application/json'
                        },
                        url: "{{ route('update_trial_form', ['id' => ':id']) }}".replace(':id', id),
                        data: JSON.stringify(data),
                        success: function(response) {
                            console.log('Response:', response); // Debug log
                            if (response.success) {
                                $('#updateTrialModal').modal('hide');
                                $('#trial_table').DataTable().ajax.reload();
                                Swal.fire('Updated!', 'The Trial has been updated.', 'success');
                                $('#updateTrialForm')[0].reset();
                                // Remove all error messages
                                $('.is-invalid').removeClass('is-invalid');
                                $('.invalid-feedback').text('');
                            } else {
                                let errorMessage = response.message ||
                                    'An unexpected error occurred.';
                                if (response.errors && Object.keys(response.errors).length > 0) {
                                    // Display new errors
                                    $.each(response.errors, function(field, messages) {
                                        let input = $('[name="' + field + '"]');
                                        input.addClass('is-invalid');
                                        input.next('.invalid-feedback').html(messages.join(
                                            '<br>'));
                                    });
                                }
                                Swal.fire('Error!', errorMessage, 'error');
                            }
                        },
                        error: function(xhr) {
                            console.log('Error:', xhr); // Debug log
                            if (xhr.status === 422) { // Validation error
                                let errors = xhr.responseJSON.errors;
                                $.each(errors, function(key, value) {
                                    let input = $('[name="' + key + '"]');
                                    input.addClass('is-invalid');
                                    input.next('.invalid-feedback').text(value[0]);
                                });
                            } else {
                                let message = 'Something went wrong.';
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    message = xhr.responseJSON.message;
                                }
                                Swal.fire('Error!', message, 'error');
                            }
                        },
                        complete: function() {
                            submitButton.prop('disabled', false);
                        }
                    });
                });


            });
        </script>
    @endpush
@endsection