@extends('layouts.admin')

@section('content')
    @include('include.datatable-css')

    <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" aria-current="page">Leads</li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="page-header-title">
                                <h3 class="mb-0">Leads</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">
                            @include('include.user-filters-html-part', ['customerType' => 'lead'])
                            @include('include.flash-message')
                            <p id="custom-alert" class="alert alert-info d-none"></p>

                            <div class="dt-responsive table-responsive">
                                <table id="simpletable" class="table table-striped table-bordered nowrap">
                                    <thead>
                                        <tr>
                                            <th>Account Id</th>
                                            <th>First Name</th>
                                            <th>Last Name</th>
                                            <th>Phone</th>
                                            <th>Email</th>
                                            <th>Address Type</th>
                                            <th>House Number</th>
                                            <th>Street</th>
                                            <th>City</th>
                                            <th>Zipcode</th>
                                            <th>Address</th>
                                            <th>Address Verified</th>
                                            <th>Partial Payment</th>
                                            <th>Joined On</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if (is_countable($users))
                                            @foreach ($users as $item)
                                                <tr>
                                                    <td>
                                                        {{ $item->accountId }}
                                                    </td>
                                                    <td>
                                                        {{ $item->firstName }}
                                                    </td>
                                                    <td>
                                                        {{ $item->lastName }}
                                                    </td>
                                                    <td>
                                                        <a class="text-decoration-none text-dark" href="tel:+{{ $item->phone }}">
                                                            {{ $item->phone }}
                                                        </a>
                                                    </td>
                                                    <td>
                                                        <a class="text-decoration-none text-dark" href="mailto:{{ $item->email }}">
                                                            {{ $item->email }}
                                                        </a>
                                                    </td>
                                                    <td>
                                                        {{ isset($item->address) ? $item->address->addressType : '' }}
                                                    </td>
                                                    @isset($item->address)
                                                        <td>
                                                            <a href="{{ route('map', ['user' => $item->id]) }}" class="text-dark">
                                                                {{ $item->address->houseNumber }}
                                                            </a>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('map', ['user' => $item->id]) }}" class="text-dark">
                                                                {{ $item->address->street }}
                                                            </a>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('map', ['user' => $item->id]) }}" class="text-dark">
                                                                {{ $item->address->city }}
                                                            </a>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('map', ['user' => $item->id]) }}" class="text-dark">
                                                                {{ $item->address->zipcode }}
                                                            </a>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('map', ['user' => $item->id]) }}" class="text-dark">
                                                                {{ $item->address->address }}, {{ $item->address->city }}
                                                            </a>
                                                        </td>
                                                    @else
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                    @endisset
                                                    <td class="text-center">
                                                        @if ($item->address != NULL)
                                                            @if ($item->address->address_verified == 1)
                                                                <span class="badge bg-success" role="button" onclick="toggleAddressVerification(this, {{ $item->address->id }})" data-bs-toggle="tooltip" data-bs-original-title="Click to unverify">&nbsp;Verified&nbsp;</span>
                                                            @else
                                                                <span class="badge bg-secondary" role="button" onclick="toggleAddressVerification(this, {{ $item->address->id }})" data-bs-toggle="tooltip" data-bs-original-title="Click to unverify">Unverified</span>
                                                            @endif
                                                        @else
                                                            No address
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <div class="form-check form-switch custom-switch-v1 mb-2">
                                                            <input type="checkbox" role="button" class="form-check-input input-primary" @checked($item->partialPayment) onclick="togglePartialPayment({{ $item->id }})">
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <span id="dt-{{ $item->id }}">{{ date('Y-m-d', strtotime($item->created_at)) }}</span>
                                                        &nbsp;&nbsp;
                                                        <i class="ti ti-pencil f-18 edit-delivery-date-icon" data-bs-original-title="Change join date." data-bs-toggle="tooltip" onclick="openDateChangeModal({{ $item->id }}, 'dt-{{ $item->id }}')"></i>
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="{{ route('copy-customer', ['user' => $item->id]) }}" class="avtar avtar-xs btn-link-secondary btn-pc-default" data-bs-toggle="tooltip" data-bs-original-title="Copy this record.">
                                                            <i class="ti ti-files f-18"></i>
                                                        </a>

                                                        <a href="{{ route('customer-settings', ['user' => $item->id]) }}" class="avtar avtar-xs btn-link-secondary btn-pc-default" data-bs-toggle="tooltip" data-bs-original-title="Settings">
                                                            <i class="ti ti-settings f-18"></i>
                                                        </a>

                                                        <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>

                                                        <a href="{{ route('follow-ups', ['user' => $item->id]) }}" role="button" class="avtar avtar-xs btn-link-success btn-pc-default" data-bs-toggle="tooltip" data-bs-original-title="Track Follow Ups">
                                                            <i class="ti ti-list f-18 text-secondary"></i>
                                                        </a>

                                                        <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
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                            <div id="pagination-div" class="d-flex justify-content-center my-3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Follow up and reject follow up modals --}}
    @if (is_countable($users))
        @foreach ($users as $item)
            <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>

            <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>
        @endforeach
    @endif

    {{-- Import modal --}}
    <div id="importModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="importModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger" id="importModalTitle">Import Leads</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="{{ route('import-leads') }}" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group">
                            <label class="form-label">Excel File</label>
                            <input name="file" class="form-control" type="file" accept="*">
                        </div>

                        <div>
                            <a href="{{ asset('assets/import/leads.xlsx') }}">Download Sample File</a>
                        </div>

                        <div class="form-group text-end pt-4">
                            <input type="submit" class="btn btn-primary"  value="Import">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div id="changeJoinDate" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="changeJoinDateTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-danger" id="changeJoinDateTitle">Change Join Date</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="user-id">
                    <input type="text" id="join-date" class="form-control">
                </div>
                <div class="modal-footer">
                    <button onclick="updateJoinDate()" type="button" class="btn btn-danger" data-bs-dismiss="modal">Apply</button>
                </div>
            </div>
        </div>
    </div>

    @include('include.datatable')
    @include('include.filters-common-js-part')
    @include('include.datatable-date-range-selector-js', ['url' => 'leads'])

    {{-- Page specific JS --}}
    <script>
        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();
                    }
                }
            });
        }

        function toggleAddressVerification(ele, id) {
            let alertEle = $('#custom-alert');
            let url = "{{ route('toggle-address-verification', ['address' => 'arg1']) }}";
            url = url.replace('arg1', id);

            $.ajax({
                type: 'POST',
                url: url,
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(data) {
                    if (data == -1) {
                        alertEle.text('Address cannot be verified as it is missing valid latitude, and longitude.');
                        alertEle.removeClass('d-none');
                        alertEle.removeAttr('style');

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

        function togglePartialPayment(id) {
            let alertEle = $('#custom-alert');
            let url = "{{ route('toggle-partial-payment', ['user' => 'cid']) }}";
            url = url.replace('cid', id);

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

        $('.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')

                    location.reload();
                }
            });
        });

        function updateJoinDate() {
            let url = "{{ route('update-customer-join-date') }}";
            let user_id = $('#user-id').val();
            let join_date = $('#join-date').val();

            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    userId: user_id,
                    joinDate: join_date,
                },
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function(data) {
                    $('#dt-' + user_id).text(data);
                    $('#dt-' + user_id).closest('td').css('color', 'green');

                    let alertEle = $('#custom-alert');

                    alertEle.text('Join date updated.');
                    alertEle.removeClass('d-none');
                    alertEle.removeAttr('style');

                    setTimeout(() => {
                        alertEle.slideUp(500, function() {
                            alertEle.addClass('d-none');
                            $('#dt-' + order_id).closest('td').css('color', 'black');
                        });
                    }, 1000);
                }
            });
        }

        function openDateChangeModal(userId, el) {
            var modal = new bootstrap.Modal(document.getElementById('changeJoinDate'));

            $('#user-id').val(userId);
            $('#join-date').val($('#'+el).text());

            modal.show();
        }

        $(document).ready(function() {
            if ('{{ $startDate }}' || '{{ $endDate }}') {
                toggleFilter('dateRange');
            }
        });
    </script>
@endsection