@extends('admin.layout.main')

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

    @push('styles')
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
        <style>
            .select2-container--open .select2-dropdown {
                z-index: 99999;
            }

            .select2-selection__choice {
                background-color: #0080FF !important;
                color: #fff;
            }

            .name {
                display: block;
                /* Ensures name is a block element */
            }

            .badge {
                display: inline-block;
                padding: 5px 10px;
                border-radius: 12px;
                font-size: 12px;
                margin-top: 2px !important;
                color: #fff;
            }
        </style>
    @endpush

    <!-- Start Breadcrumbbar -->
    <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('leads_list') }}">Leads</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Leads List</li>
                    </ol>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="widgetbar">
                    <button class="btn btn-primary-rgba" id="createLead">Add Lead</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">Leads Table</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="overflow-x: scroll">
                            <table id="leads_table" class="table-bordered display table">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Phone</th>
                                        <th>Lead Manager</th>
                                        <th>Assigned</th>
                                        <th>Status</th>
                                        <th>Courses</th>
                                        <th>Feedback</th>
                                        <th>Next Follow Up</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Feedback Modal -->
    <div class="modal fade" id="addFeedbackModal" tabindex="-1" role="dialog" aria-labelledby="createLeadModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createLeadModalLabel">Add Feedback</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="FeedbackForm">
                    <div class="modal-body">
                        <input type="hidden" name="lead_id" id="feedback_lead_id">
                        <div class="form-group">
                            <label for="feedback_text">Feedback</label>
                            <input type="text" class="form-control" id="feedback_text" name="feedback_text" required>
                        </div>
                        <div class="form-group">
                            <label for="follow_up_time">Follow Up Time</label>
                            <input type="datetime-local" class="form-control" id="follow_up_time" name="follow_up_time"
                                required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Add Feedback</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Add Trial Modal -->
    <div class="modal fade" id="addTrialModal" tabindex="-1" role="dialog" aria-labelledby="addTrialModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addTrialModalLabel">Add Trial</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="TrialForm">
                    <div class="modal-body">
                        <input type="hidden" name="lead_id" id="trial_lead_id">
                        <div class="form-group">
                            <label for="course_id">Course</label>
                            <select name="course_id" id="trial_course_id" class="form-control" required>
                                <option value="">Select Course</option>
                            </select>

                        </div>

                        <div class="form-group">
                            <label for="teacher_id">Teachers</label>
                            <select name="teacher_id" class="form-control" required>
                                <option selected>Select Teacher</option>
                                @foreach ($teachers as $teacher)
                                    <option value="{{ $teacher['id'] }}">{{ $teacher['name'] }}</option>
                                @endforeach
                            </select>
                        </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>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Make Trial</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Add Label Modal -->
    <div class="modal fade" id="addLabelModal" tabindex="-1" role="dialog" aria-labelledby="addLabelModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addLabelModalLabel">Add Label</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="LabelForm">
                    <div class="modal-body">
                        <input type="hidden" name="lead_id" id="label_lead_id">
                        <div class="form-group">
                            <label for="label_ids">Label</label>
                            <select name="label_ids[]" class="select2 form-select" multiple required>
                                @foreach ($labels as $label)
                                    <option value="{{ $label['id'] }}">{{ $label['label'] }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Add Label</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!-- Add Lead Modal -->
    <div class="modal fade" id="leadscreate" tabindex="-1" role="dialog" aria-labelledby="createLeadModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createLeadModalLabel">Add Lead</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="createleadsform">
                    <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"></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"></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"></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"></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>Select Status</option>
                                @foreach ($statuses as $status)
                                    <option value="{{ $status['id'] }}">{{ $status['status'] }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="courses">Courses</label>
                            <select name="courses[]" id="add_courses" class="select2 form-select" multiple required>
                                @foreach ($courses as $course)
                                    <option value="{{ $course['id'] }}">{{ $course['name'] }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Add Lead</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="updateLeadModal" tabindex="-1" role="dialog" aria-labelledby="updateLeadModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateLeadModalLabel">Update Lead</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="updateLeadForm">
                    <div class="modal-body">
                        <input type="hidden" id="lead_id" name="lead_id">
                        <div class="form-group">
                            <label for="lead_name">Name</label>
                            <input type="text" class="form-control" id="lead_name" name="name" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="lead_phone">Phone number</label>
                            <input type="number" class="form-control" id="lead_phone" name="phone" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="leadManager">Manager</label>
                            <input class="form-control" id="leadManager" name="lead_manager" required />
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="update_next_follow_up">Next Follow Up</label>
                            <input type="datetime-local" class="form-control" id="update_next_follow_up"
                                name="next_follow_up" required>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="lead_status_id">Status</label>
                            <select name="status_id" id="lead_status_id" class="form-control">
                                <option selected>Select Status</option>
                                @foreach ($statuses as $status)
                                    <option value="{{ $status['id'] }}">{{ $status['status'] }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <label for="lead_courses">Courses</label>
                            <select name="courses[]" id="lead_courses" class="select2 form-select" multiple required>
                                @foreach ($courses as $course)
                                    <option value="{{ $course['id'] }}">{{ $course['name'] }}</option>
                                @endforeach
                            </select>
                            <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.11.5/js/jquery.dataTables.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></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>
            $(".select2").select2({
                width: '100%',
            });
            $(document).ready(function() {
                var table = $('#leads_table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{ route('leads_list') }}',
                    columns: [{
                            data: 'id',
                            name: 'id'
                        },
                        {
                            data: 'name',
                            name: 'name',
                            render: function(data, type, row) {
                                // Start with the name and a line break
                                var content = `<span class="name">${data}</span>`;

                                // Check if lead_labels exists and is an array
                                if (Array.isArray(row.lead_labels)) {
                                    // Generate badges for each label
                                    var badges = row.lead_labels.map(function(label) {
                                        return `<span class="badge" style="background-color: ${label.color};">${label.name}</span>`;
                                    }).join(' ');

                                    // Append badges on a new line
                                    content += badges;
                                }

                                return content;
                            }
                        },
                        {
                            data: 'phone',
                            name: 'phone'
                        },
                        {
                            data: 'lead_manager',
                            name: 'lead_manager'
                        },
                        {
                            data: 'assigned_name',
                            name: 'assigned_name'
                        },
                        {
                            data: 'status_name',
                            name: 'status_name'
                        },
                        {
                            data: 'lead_courses',
                            name: 'lead_courses'
                        }, // Show transformed course names
                        {
                            data: 'feedback',
                            name: 'feedback'
                        },
                        {
                            data: 'next_follow_up',
                            name: 'next_follow_up',
                            render: function(data) {
                                return moment(data).format('DD MMM YYYY, hh:mm A');
                            }
                        },
                        {
                            data: null,
                            name: 'action',
                            render: function(data, type, row) {
                                return `
                                    <div class="dropdown">
                                    <button class="btn btn-round btn-primary" type="button" id="CustomdropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-more-vertical-"></i></button>
                                        <div class="dropdown-menu" aria-labelledby="CustomdropdownMenuButton1">
                                            <a class="dropdown-item" data-id="${row.id}" id="addFeedback" role="button"><i class="feather icon-plus mr-2"></i>Add Feedback</a>
                                            <a class="dropdown-item" data-id="${row.id}" id="addLabel" role="button"><i class="feather icon-plus mr-2"></i>Add Label</a>
                                            <a class="dropdown-item" data-id="${row.id}" id="addTrial" role="button"><i class="feather icon-plus mr-2"></i>Make Trial</a>
                                            <a class="dropdown-item" href="{{ url('timeline') }}/${row.id}" role="button"><i class="feather icon-clock mr-2"></i>Timeline</a>
                                            <a class="dropdown-item" data-id="${row.id}" id="editlead" role="button"><i class="feather icon-edit mr-2"></i>Edit</a>
                                            <a class="dropdown-item" data-id="${row.id}" id="deleteLead" role="button"><i class="feather icon-trash mr-2"></i>Delete</a>
                                        </div>
                                    </div>
            `;
                            }
                        }
                    ]
                });



                $('#createLead').on('click', function() {
                    $('#leadscreate').modal('show');
                });

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

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

                    let formData = new FormData(this);

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

                    formData.append('next_follow_up', formattedDate);

                    $.ajax({
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('add_lead_form') }}",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.success) {
                                $('#leadscreate').modal('hide');
                                $('#leads_table').DataTable().ajax.reload();
                                Swal.fire('Added!', response.message, 'success');
                                $('#createleadsform')[0].reset();
                                $('#add_courses').val([]).trigger('change');
                                $('.is-invalid').removeClass('is-invalid');
                                $('.invalid-feedback').remove();
                            } else {
                                Swal.fire('Error!', response.message || 'An error occurred.',
                                    'error');
                            }
                        },
                        error: function(xhr) {
                            // Clear previous validation errors
                            $('.is-invalid').removeClass('is-invalid');
                            $('.invalid-feedback').remove();

                            if (xhr.status === 422) {
                                // Display validation errors
                                let response = xhr.responseJSON;
                                $.each(response.errors, function(key, value) {
                                    // Get the form input based on the key
                                    let input = $('#' + key);

                                    // Add the 'is-invalid' class and append the error message
                                    input.addClass('is-invalid');
                                    input.after('<div class="invalid-feedback">' + value[
                                        0] + '</div>');
                                });
                            } else {
                                Swal.fire('Error!', 'Something went wrong.', 'error');
                            }
                        },
                        complete: function() {
                            // Re-enable the submit button and reset text
                            $submitButton.prop('disabled', false).text('Add Lead');
                        }
                    });
                });

                // Handle edit
                $('body').on('click', '#editlead', function() {
                    var id = $(this).data('id');
                    $.ajax({
                        type: "GET",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('get_lead', ['id' => ':id']) }}".replace(':id', id),
                        success: function(response) {
                            if (response.status == 404) {
                                Swal.fire('Error!', response.message, 'error');
                                $('#updateLeadModal').modal('hide');
                            } else {
                                var lead = response.lead;
                                $('#lead_id').val(lead.data.id);
                                $('#lead_name').val(lead.data.name);
                                $('#lead_phone').val(lead.data.phone);
                                $('#leadManager').val(lead.data.lead_manager);
                                $('#lead_status_id').val(lead.data.status_id);
                                $('#lead_courses').val([]).trigger('change');
                                $('#updateLeadModal').modal('show');
                            }
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', 'Something went wrong.', 'error');
                        }
                    });
                });
                $('#updateLeadForm').on('submit', function(e) {
                    e.preventDefault();

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

                    // Serialize the form data
                    let formData = $(this).serializeArray();

                    // Get and convert 'next_follow_up' to UTC format
                    let nextFollowUp = $('#update_next_follow_up').val();
                    let localDate = new Date(nextFollowUp);
                    let utcDate = new Date(Date.UTC(
                        localDate.getFullYear(),
                        localDate.getMonth(),
                        localDate.getDate(),
                        localDate.getHours(),
                        localDate.getMinutes(),
                        localDate.getSeconds()
                    ));
                    let formattedDate = utcDate.toISOString().slice(0, 19).replace('T', ' ');

                    // Update the 'next_follow_up' field in the formData
                    formData = formData.map(field => field.name === 'next_follow_up' ? {
                        name: 'next_follow_up',
                        value: formattedDate
                    } : field);

                    let id = $('#lead_id').val(); // Ensure this is set correctly

                    $.ajax({
                        type: 'PUT',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('update_lead_form', ['id' => ':id']) }}".replace(':id', id),
                        data: $.param(formData), // Convert the array to URL-encoded string
                        success: function(response) {
                            if (response.success) {
                                $('#updateLeadModal').modal('hide');
                                $('#leads_table').DataTable().ajax.reload();
                                Swal.fire('Updated!', 'The Lead has been updated.', 'success');
                                $('#updateLeadForm')[0].reset();
                                $('.is-invalid').removeClass('is-invalid');
                                $('.invalid-feedback').remove();
                            } else {
                                Swal.fire('Error!', response.message, 'error');
                            }
                        },
                        error: function(xhr) {
                            $('.is-invalid').removeClass('is-invalid');
                            $('.invalid-feedback').remove();

                            if (xhr.status === 422) {
                                let response = xhr.responseJSON;
                                $.each(response.errors, function(key, value) {
                                    let input = $('[name="' + key + '"]');
                                    input.addClass('is-invalid');
                                    input.after('<div class="invalid-feedback">' + value[
                                        0] + '</div>');
                                });
                            } else {
                                Swal.fire('Error!', 'Something went wrong.', 'error');
                            }
                        },
                        complete: function() {
                            $submitButton.prop('disabled', false).text('Update');
                        }
                    });
                });


                $('body').on('click', '#deleteLead', 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_lead', ['id' => ':id']) }}"
                                    .replace(':id', id),
                                success: function(response) {
                                    table.ajax.reload();
                                    Swal.fire('Deleted!',
                                        'The Lead has been deleted.', 'success');
                                },
                                error: function(xhr) {
                                    Swal.fire('Error!', 'Lead is used in related records',
                                        'error');
                                }
                            });
                        }
                    });
                });

                // Handle "Add Feedback" button click
                $('body').on('click', '#addFeedback', function() {
                    var leadId = $(this).data('id');
                    $('#feedback_lead_id').val(leadId);
                    $('#addFeedbackModal').modal('show');
                });

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

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

                    // Create FormData object
                    var formData = new FormData(this);

                    // Format the follow-up time
                    let nextFollowUp = $('#follow_up_time').val();
                    let localDate = new Date(nextFollowUp);
                    let utcDate = new Date(Date.UTC(
                        localDate.getFullYear(),
                        localDate.getMonth(),
                        localDate.getDate(),
                        localDate.getHours(),
                        localDate.getMinutes(),
                        localDate.getSeconds()
                    ));
                    let formattedDate = utcDate.toISOString().slice(0, 19).replace('T', ' ');

                    // Append formatted follow-up time to FormData
                    formData.append('follow_up_time', formattedDate);

                    $.ajax({
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('add_feedback_form') }}",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.success) {
                                $('#addFeedbackModal').modal('hide');
                                $('#leads_table').DataTable().ajax
                                    .reload(); // Refresh the DataTable
                                Swal.fire('Success!', response.message, 'success');
                                $('#FeedbackForm')[0].reset();
                                // Remove validation error classes and messages
                                $('.is-invalid').removeClass('is-invalid');
                                $('.invalid-feedback').remove();
                            } else {
                                Swal.fire('Error!', response.message, 'error');
                            }
                        },
                        error: function(xhr) {
                            // Clear previous validation errors
                            $('.is-invalid').removeClass('is-invalid');
                            $('.invalid-feedback').remove();

                            if (xhr.status === 422) {
                                // Handle validation errors
                                let response = xhr.responseJSON;
                                $.each(response.errors, function(key, value) {
                                    // Get the form input based on the key
                                    let input = $('[name="' + key + '"]');

                                    // Add the 'is-invalid' class and append the error message
                                    input.addClass('is-invalid');
                                    input.after('<div class="invalid-feedback">' + value[
                                        0] + '</div>');
                                });
                            } else {
                                Swal.fire('Error!', 'Something went wrong.', 'error');
                            }
                        },
                        complete: function() {
                            // Re-enable the submit button and reset text
                            $submitButton.prop('disabled', false).text('Submit');
                        }
                    });
                });



                $('body').on('click', '#addLabel', function() {
                    var leadId = $(this).data('id');
                    $('#label_lead_id').val(leadId);
                    $('#addLabelModal').modal('show');
                });
                // Handle feedback form submission
                $('#LabelForm').on('submit', function(e) {
                    e.preventDefault();

                    // Disable the submit button to prevent multiple submissions
                    let $submitButton = $(this).find('button[type="submit"]');
                    $submitButton.prop('disabled', true);

                    $.ajax({
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('add_leads_label_form') }}",
                        data: $(this).serialize(),
                        success: function(response) {
                            if (response.success) {
                                $('#addLabelModal').modal('hide');
                                $('#leads_table').DataTable().ajax.reload();
                                $('#LabelForm')[0].reset();
                                Swal.fire('Added!', 'The Label has been added to Lead.', 'success');
                            } else {
                                Swal.fire('Error!', response.message, 'error');
                            }
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', 'Trial for this course alreay exist', 'error');
                        },
                        complete: function() {
                            // Re-enable the submit button and reset text
                            $submitButton.prop('disabled', false).text('Submit');
                        }
                    });
                });



                $('body').on('click', '#addTrial', function() {
                    var id = $(this).data('id');
                    $.ajax({
                        type: "GET",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('get_lead', ['id' => ':id']) }}".replace(':id', id),
                        success: function(response) {
                            if (response.status == 404) {
                                Swal.fire('Error!', response.message, 'error');
                                $('#addTrialModal').modal('hide');
                            } else {
                                var lead = response.lead;
                                $('#trial_lead_id').val(lead.data.id);

                                // Clear existing options
                                $('#trial_course_id').empty();

                                // Add default option
                                $('#trial_course_id').append(
                                    '<option value="">Select Course</option>');

                                // Populate the course dropdown
                                $.each(lead.data.lead_courses, function(index, course) {
                                    $('#trial_course_id').append('<option value="' + course
                                        .course_id + '">' + course.course_name +
                                        '</option>');
                                });

                                $('#addTrialModal').modal('show');
                            }
                        },
                        error: function(xhr) {
                            Swal.fire('Error!', 'Something went wrong.', 'error');
                        }
                    });
                });


                // Handle form submission
                $('#TrialForm').on('submit', function(e) {
                    e.preventDefault();

                    // Disable the submit button to prevent multiple submissions
                    let $submitButton = $(this).find('button[type="submit"]');
                    $submitButton.prop('disabled', true);

                    let formData = new FormData(this);

                    // Convert trial_time to the desired format
                    let trial_time = $('#trial_time').val();
                   
                    let localDate = new Date(trial_time);
                    let utcDate = new Date(Date.UTC(
                        localDate.getFullYear(),
                        localDate.getMonth(),
                        localDate.getDate(),
                        localDate.getHours(),
                        localDate.getMinutes(),
                        localDate.getSeconds()
                    ));
                    let formattedDate = utcDate.toISOString().slice(0, 19).replace('T', ' ');
                    formData.set('trial_time', formattedDate);

                    $.ajax({
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('add_lead_trial_form') }}",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if (response.success) {
                                $('#addTrialModal').modal('hide');
                                $('#TrialForm')[0].reset();
                                Swal.fire('Success!', 'The trial has been added.', 'success');
                                $('.is-invalid').removeClass('is-invalid');
                                $('.invalid-feedback').remove();
                            } else {
                                Swal.fire('Error!', 'Failed to add the trial.', 'error');
                            }
                        },
                        error: function(xhr) {
                            // Clear previous validation errors
                            $('.is-invalid').removeClass('is-invalid');
                            $('.invalid-feedback').remove();

                            if (xhr.status === 422) {
                                // Handle validation errors
                                let response = xhr.responseJSON;
                                $.each(response.errors, function(key, value) {
                                    // Get the form input based on the key
                                    let input = $('[name="' + key + '"]');

                                    // Add the 'is-invalid' class and append the error message
                                    input.addClass('is-invalid');
                                    input.after('<div class="invalid-feedback">' + value[
                                        0] + '</div>');
                                });
                            } else {
                                Swal.fire('Error!', 'Something went wrong.', 'error');
                            }
                        },
                        complete: function() {
                            // Re-enable the submit button and reset text
                            $submitButton.prop('disabled', false).text('Submit');
                        }
                    });
                });


                // Function to handle error responses
                function handleErrorResponse(response) {
                    if (response.errors) {
                        let errorMessages = '';
                        $.each(response.errors, function(key, value) {
                            errorMessages += value[0] + '<br>';
                        });
                        Swal.fire('Error!', errorMessages, 'error');
                    } else {
                        Swal.fire('Error!', response.message || 'Something went wrong.', 'error');
                    }
                }
            });
        </script>
    @endpush
@endsection






{{-- 
<div class="dropdown">
    <button class="btn btn-round btn-primary" type="button" id="CustomdropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="feather icon-more-vertical-"></i></button>
         <div class="dropdown-menu" aria-labelledby="CustomdropdownMenuButton1">
             <a class="dropdown-item" data-id="${row.id}" id="editlead" role="button"><i class="feather icon-edit mr-2"></i>Edit</a>
             <a class="dropdown-item" data-id="${row.id}" id="deleteLead" role="button"><i class="feather icon-trash mr-2"></i>Delete</a>
             <a class="dropdown-item" data-id="${row.id}" id="addFeedback" role="button"><i class="feather icon-plus mr-2"></i>Add Feedback</a>
             <a class="dropdown-item" data-id="${row.id}" id="addLabel" role="button"><i class="feather icon-plus mr-2"></i>Add Label</a>
             <a class="dropdown-item" data-id="${row.id}" id="addTrial" role="button"><i class="feather icon-plus mr-2"></i>Make Trial</a>
             <a class="dropdown-item" href="{{ url('timeline') }}/${row.id}" role="button"><i class="feather icon-clock mr-2"></i>Timeline</a>
         </div>
  </div>    --}}