@extends('admin.layout.main')
@section('content')
    @push('styles')
        <!-- Vertical Timeline css -->
        <link href="{{ asset('assets/assets/plugins/vertical-timeline/vertical-timeline.css') }}" rel="stylesheet" type="text/css">
        <link href="{{ asset('assets/assets/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
        <link href="{{ asset('assets/assets/css/icons.css') }}" rel="stylesheet" type="text/css">
        <link href="{{ asset('assets/assets/css/flag-icon.min.css') }}" rel="stylesheet" type="text/css">
        <link href="{{ asset('assets/assets/css/style.css') }}" rel="stylesheet" type="text/css">
      
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    @endpush
    <div class="breadcrumbbar">
        <div class="row align-items-center">
            <div class="col-md-8 col-lg-8">
                <h4 class="page-title">Timeline</h4>
                <div class="breadcrumb-list">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('label_list') }}">Leads</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Timeline</li>
                    </ol>
                </div>
            </div>
            <div class="col-md-4 col-lg-4">
                <div class="widgetbar">
                    <button class="btn btn-primary-rgba" id="addFeedback"><i class="feather icon-plus mr-2"></i>Add
                        Feedback</button>
                </div>
            </div>
        </div>
    </div>
    <div class="contentbar">
        <div class="card m-b-30">
            <section class="timeline timeline-js" style="margin: 0px">
                <div class="timeline-container">


                    @foreach ($lead['feedbacks'] as $feedback)
                        <div class="timeline-block block-js">
                            <div class="timeline-img timeline-img-primary img-js">
                                <i class="feather icon-flag"></i>
                            </div>
                            <div class="timeline-content content-js">
                                <h4 style="width: 100%">Added by {{ $lead['lead_manager'] }}</h4>
                                <p>{{ $feedback['feedback_text'] }}</p>
                                <span
                                    class="timeline-date">{{ \Carbon\Carbon::parse($feedback['follow_up_time'])->format('d M Y, h:i A') }}</span>
                            </div>
                        </div>
                    @endforeach





                </div>
            </section>
        </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">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" name="lead_id" id="feedback_lead_id" value="{{ $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>
    @push('scripts')
        <script src="{{ asset('assets/assets/js/jquery.min.js') }}"></script>
        <script src="{{ asset('assets/assets/js/popper.min.js') }}"></script>
        <script src="{{ asset('assets/assets/js/bootstrap.min.js') }}"></script>
        <script src="{{ asset('assets/assets/js/modernizr.min.js') }}"></script>
        <script src="{{ asset('assets/assets/js/detect.js') }}"></script>
        <script src="{{ asset('assets/assets/js/jquery.slimscroll.js') }}"></script>
        <script src="{{ asset('assets/assets/js/vertical-menu.js') }}"></script>
        <!-- Switchery js -->
        <script src="{{ asset('assets/assets/plugins/switchery/switchery.min.js') }}"></script>
        <!-- Timeline js -->
        <script src="{{ asset('assets/assets/plugins/vertical-timeline/vertical-timeline.js') }}"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            // Handle "Add Feedback" button click
            $('body').on('click', '#addFeedback', function() {
                $('#addFeedbackModal').modal('show');
            });

            $('#FeedbackForm').on('submit', function(e) {
                // 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');
                            
                            Swal.fire('Success!', response.message, 'success');
                            location.reload();

                            // 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');
                    }
                });
            });
        </script>
    @endpush
@endsection