@extends('layouts.app')

@section('title', 'Leads')

@section('page-specific-style')
<!-- DataTables -->
<link href="{{asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />

<!-- Responsive datatable examples -->
<link href="{{asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />
{{-- tags input --}}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<style>
    .bootstrap-tagsinput .label-info {
        background-color: cadetblue;
        padding: 0 3px;
        border-radius: 5px;
    }

    .bootstrap-tagsinput {
        display: block;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0">Leads</h4>
            {{-- <a href="{{ route('leads.create') }}" class="btn btn-primary">Add Lead</a> --}}
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createLeadModal" title="Add new lead"><i class="mdi mdi-plus me-1"></i></button>
        </div>
        <div class="col-12 sm-RnP">
            <div class="card">
                <div class="card-body">
                    @include('includes.alerts')
                    <div class="table-container">
                        <table id="leads-datatable" class="table table-bordered dt-responsive nowrap w-100">
                            <thead class="table-light">
                                <tr>
                                    <th>Name</th>
                                    <th>Updated On</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($leads as $lead)
                                    <tr>
                                        <td>
                                            <p class="text-muted mb-0">{{ $lead->fullName }}</p>
                                        </td>
                                        <td>{{ $lead->updated_at?->format('m/d/Y H:i') }}</td>
                                        <td>
                                            <a href="{{ route('leads.edit', $lead->id) }}" class="btn btn-sm btn-warning"><i class="fas fa-edit"></i></a>
                                            <button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteLeadModal" data-id="{{ $lead->id }}" data-name="{{ $lead->fullName }}"><i class="fas fa-trash-alt"></i></button>
                                        </td>
                                    </tr>
                                @empty
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="">
                <div class="col-12 add-new-role">

                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Lead Modal -->
<div class="modal fade" id="createLeadModal" tabindex="-1" aria-labelledby="createLeadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createLeadModalLabel">Create New Lead</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('leads.store') }}" method="POST" autocomplete="off">
                    @csrf
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="country" class="form-label">Country</label>
                            <select class="form-select" id="country" name="country" required>
                                @forelse ($countries as $item)
                                    <option value="{{ $item->shortname }}">{{ $item->shortname }}</option>
                                @empty
                                    <option value="">Countries not found!</option>
                                @endforelse
                            </select>
                        </div>
                        <div class="col-md-8 mb-3">
                            <label for="phone">Primary Phone</label>
                            <input type="text" class="form-control" id="phone" name="primary_phone_number" placeholder="Primary Phone" autocomplete="off" required>
                            <div id="phone-error" class="text-default text-bold mt-2" style="display: none;"></div>
                            <div id="phone-loader" class="position-absolute top-50 end-0 translate-middle-y me-2" style="display: none;">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="first_name">First Name</label>
                            <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name" autocomplete="off" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="middle_name">Middle Name</label>
                            <input type="text" class="form-control" id="middle_name" name="middle_name" placeholder="Middle Name" autocomplete="off">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="last_name">Last Name</label>
                            <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" autocomplete="off" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="is_active" class="form-label">Status</label>
                            <select class="form-select" id="is_active" name="status">
                                @forelse ($leadStatusItems as $item)
                                    <option value="{{ $item->value }}">{{ $item->value }}</option>
                                @empty
                                    <option value="">No status found!</option>
                                @endforelse
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="assigned_to" class="form-label">Assigned To</label>
                            <select class="form-select" id="assigned_to" name="assigned_to_user">
                                @forelse ($assignedToUsers as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                @empty
                                    <option value="">No user found!</option>
                                @endforelse
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="tags" class="form-label">Tags</label>
                            <input type="text" class="form-control" id="tags" name="tags[]" placeholder="Tags" data-role="tagsinput" autocomplete="off">
                            @error('tags')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="source">Source</label>
                            <select class="form-select" id="source" name="source">
                                @forelse ($sourceItems as $source)
                                    <option value="{{ $source->value }}">{{ $source->value }}</option>
                                @empty
                                    <option value="">No source found!</option>
                                @endforelse
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" id="createLeadBtn" class="btn btn-primary">Create New Lead</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteLeadModal" tabindex="-1" aria-labelledby="deleteRoleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteRoleModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete the role <strong id="roleName"></strong>?
            </div>
            <div class="modal-footer">
                <form id="deleteRoleForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-specific-script')
<!-- Required datatable js -->
<script src="{{asset('assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>

<!-- Responsive examples -->
<script src="{{asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js')}}"></script>

{{-- tags input js --}}
{{-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        $('#leads-datatable').DataTable({
            responsive: true,
            lengthChange: false
        });

        $('#tags').tagsinput({
            trimValue: true,
            allowDuplicates: false
        });

        const createLeadModal = document.getElementById('createLeadModal');
        const createLeadForm = document.getElementById('createLeadForm');
        const phoneInput = document.getElementById('phone');
        const phoneError = document.getElementById('phone-error');
        const createLeadBtn = document.getElementById('createLeadBtn');
        const phoneLoader = document.getElementById('phone-loader');



        createLeadModal.addEventListener('show.bs.modal', function () {
            // Reset form fields
            createLeadForm.reset();
            phoneError.style.display = 'none';
            createLeadBtn.disabled = false;
        });

        phoneInput.addEventListener('blur', function () {
            const phoneNumber = phoneInput.value.trim();

            if (phoneNumber) {
                 // Show loader
                phoneLoader.style.display = 'block';

                $.ajax({
                    url: '{{ route('leads.checkPhone') }}',
                    method: 'GET',
                    data: { phone: phoneNumber },
                    success: function (response) {
                        if (response.exists) {
                            phoneError.innerHTML = `Lead already exists with this number: ${response.leadName}. <a href="${response.editLink}">View Lead</a>`;
                            phoneError.style.display = 'block';
                            createLeadBtn.disabled = true;
                        } else {
                            phoneError.style.display = 'none';
                            createLeadBtn.disabled = false;
                        }
                        // Hide loader
                        phoneLoader.style.display = 'none';
                    },
                    error: function () {
                        phoneError.innerHTML = 'An error occurred while checking the phone number.';
                        phoneError.style.display = 'block';
                        console.error('Error:', error);
                        // Hide loader in case of error
                        phoneLoader.style.display = 'none';
                    }
                });
            } else {
                phoneError.style.display = 'none'; // Hide error if input is empty
                createLeadBtn.disabled = false;
            }
        });


        const deleteLeadModal = document.getElementById('deleteLeadModal');

        deleteLeadModal.addEventListener('show.bs.modal', function (event) {
            const button = event.relatedTarget; // Button that triggered the modal
            const leadId = button.getAttribute('data-id'); // Extract info from data-* attributes
            const leadName = button.getAttribute('data-name');
            const form = deleteLeadModal.querySelector('#deleteLeadForm');

            form.action = `/lead/delete/${leadId}`; // Update form action URL
            deleteLeadModal.querySelector('#leadName').textContent = leadName; // Update lead name in modal
        });
    });

    setTimeout(function () {
        const alerts = document.querySelectorAll('.alert');
        alerts.forEach(alert => {
            if (alert.classList.contains('fade') && alert.classList.contains('show')) {
                new bootstrap.Alert(alert).close();
            }
        });
    }, 10000); // 10,000 milliseconds = 10 seconds
</script>
@endsection