@extends('layouts.admin')

@section('content')
    <div class="pc-container">
        <div class="pc-content">
            <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item">Users Management</li>
                                <li class="breadcrumb-item">
                                    <a href="{{ route('leads') }}">Leads</a>
                                </li>
                                <li class="breadcrumb-item" aria-current="page">Lead Follow Ups</li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="page-header-title">
                                <h3 class="mb-0">Lead Follow Ups</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row pt-0">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body pt-2">
                            <div class="mt-2 mb-3">
                                <h6>
                                    {{ $user->accountId }} &nbsp;&nbsp;&nbsp;
                                    @isset($user)
                                        {{ $user->firstName . ' ' . $user->lastName }}
                                    @endisset
                                </h6>
                            </div>
                            <div>
                                @include('include.flash-message')
                                <p id="custom-alert" class="alert alert-info d-none"></p>
                            </div>

                            <div class="dt-responsive table-responsive">
                                <table id="simpletable" class="table table-striped table-bordered nowrap">
                                    <thead>
                                        <tr>
                                            <th>Remarks</th>
                                            <th>Date & Time</th>
                                            <th>Next Follow Up Date</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($followUps as $item)
                                            <tr>
                                                <td>
                                                    {{ $item->remarks }}
                                                </td>
                                                <td>
                                                    {{ $item->created_at }}
                                                </td>
                                                <td>
                                                    {{ $item->nextFollowUpDate }}
                                                </td>
                                                <td>
                                                    <div id="followUpModal{{$item->id}}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="followUpModalTitle{{$item->id}}" aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                                            <div class="modal-content">
                                                                <form class="follow-up-form" data-user="{{ $item->id }}">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title" id="followUpModalTitle{{$item->id}}">Follow Up</h5>
                                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                    </div>
                                                                    <div class="modal-body pb-1">
                                                                        <div class="form-group">
                                                                            <label for="follow-up-datetime{{$item->id}}" class="form-label d-block">Next Follow Up Date & Time</label>
                                                                            <input class="form-control dt" type="datetime-local" value="{{ date('Y-m-dTh:i:s') }}" id="follow-up-datetime{{$item->id}}" required>
                                                                        </div>
                                                                        <div class="form-group">
                                                                            <textarea class="form-control" rows="4" placeholder="Remarks..." required></textarea>
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
                                                                        <button type="submit" class="btn btn-success">Save</button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <span data-bs-toggle="tooltip" data-bs-original-title="Add Follow Up">
                                                        <a href="javascript:void(0)" role="button" data-bs-toggle="modal" data-bs-target="#followUpModal{{$item->id}}" class="avtar avtar-xs btn-link-success btn-pc-default">
                                                            <i class="ti ti-link f-18 text-success"></i>
                                                        </a>
                                                    </span>

                                                    <div id="rejectLeadModal{{$item->id}}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="rejectLeadModalTitle{{$item->id}}" aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                                            <div class="modal-content">
                                                                <form class="reject-lead-form" data-user="{{ $item->id }}">
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title" id="rejectLeadModalTitle{{$item->id}}">Reject Lead</h5>
                                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                    </div>
                                                                    <div class="modal-body pb-1">
                                                                        <div class="form-group">
                                                                            <textarea class="form-control" rows="4" placeholder="Remarks..." required></textarea>
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-success" data-bs-dismiss="modal">Cancel</button>
                                                                        <button type="submit" class="btn btn-danger">Reject this lead</button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <span data-bs-toggle="tooltip" data-bs-original-title="Reject this lead">
                                                        <a href="javascript:void(0)" role="button" data-bs-toggle="modal" data-bs-target="#rejectLeadModal{{$item->id}}" class="avtar avtar-xs btn-link-success btn-pc-default">
                                                            <i class="ti ti-unlink f-18 text-danger"></i>
                                                        </a>
                                                    </span>
                                                    <a role="button" class="avtar avtar-xs btn-link-success btn-pc-default" href="javascript:void(0)" onclick="convertToTrial(this, {{$item->id}})" data-bs-toggle="tooltip" data-bs-original-title="Convert this lead to Trial.">
                                                        <i class="ti ti-star f-18 text-secondary"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('assets/js/pages/dashboard-default.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/dataTables.bootstrap5.min.js') }}"></script>

    <script>
        // Datatable configuration
        $('#simpletable').DataTable({
            order: [[6, 'desc']]
        });

        function convertToTrial(ele, id) {
            var url = "{{ route('convert-to-trial', ['id' => 'cid']) }}";
            url = url.replace('cid', id);

            $.ajax({
                type: 'POST',
                url: url,
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(data){
                    if (data == 'done') {
                        location.reload();
                    }
                }
            });
        }

        $('.follow-up-form').on('submit', function(e) {
            e.preventDefault();

            let formEle = $(this);
            let userId = formEle.attr('data-user');
            let url = "{{ route('follow-up', ['user' => 'cid']) }}";
            let alertEle = $('#custom-alert');

            url = url.replace('cid', userId);

            $.ajax({
                type: 'POST',
                url: url,
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data: {
                    date: formEle.find('.dt').val(),
                    remarks: formEle.find('textarea').val(),
                },
                success: function(data) {
                    if (data == 'done') {
                        alertEle.text('Follow up successfully saved.');
                        alertEle.removeClass('d-none');
                        alertEle.removeAttr('style');

                        setTimeout(() => {
                            alertEle.slideUp(500, function() {
                                alertEle.addClass('d-none')
                            });
                        }, 5000);
                    }

                    formEle.find('.dt').val('');
                    formEle.find('textarea').val('');
                    formEle.find('.btn-close').trigger('click')
                }
            });
        });

        $('.reject-lead-form').on('submit', function(e) {
            e.preventDefault();

            let formEle = $(this);
            let userId = formEle.attr('data-user');
            let url = "{{ route('reject-lead', ['user' => 'cid']) }}";
            let alertEle = $('#custom-alert');

            url = url.replace('cid', userId);

            $.ajax({
                type: 'POST',
                url: url,
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data: {
                    remarks: formEle.find('textarea').val(),
                },
                success: function(data) {
                    if (data == 'done') {
                        alertEle.text('Lead rejected.');
                        alertEle.removeClass('d-none');
                        alertEle.removeAttr('style');

                        setTimeout(() => {
                            alertEle.slideUp(500, function() {
                                alertEle.addClass('d-none')
                            });
                        }, 5000);
                    }

                    formEle.find('.dt').val('');
                    formEle.find('textarea').val('');
                    formEle.find('.btn-close').trigger('click')

                    formEle.closest('tr').remove();
                }
            });
        });
    </script>
@endsection