@extends('employee.layouts.app')
@section('breadcrumb')
    <li class="breadcrumb-item">
        <a href="{{ route('employee.dashboard') }}">{{ __('Dashboard') }}</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
        {{ __('Leads Overview') }}
    </li>
@endsection

<style>
    .table-responsive {
        overflow: visible !important;
    }

    .table td:last-child {
        overflow: visible;
    }
</style>

@section('content')
    <div class="dash-content">
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <div class="page-header-title">
                            <h4 class="m-b-10">{{ ucfirst($type) }} {{ __('Leads') }}</h4>
                        </div>
                        {{-- <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('employee.dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item">{{ __('Leads') }}</li>
                        </ul> --}}
                    </div>
                    <div class="col-md-4 text-end">
                        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                            data-bs-target="#addLeadModal">
                            <i class="ti ti-plus"></i> {{ __('Add Lead') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body table-border-style">
                        <div class="table-responsive">
                            <table class="table" id="pc-dt-simple">
                                <thead>
                                    <tr>
                                        <th>{{ __('CONTACT INFO') }}</th>
                                        <th>{{ __('ASSIGNED TO') }}</th>
                                        <th>{{ __('BUSINESS') }}</th>
                                        <th>{{ __('REQUIREMENT') }}</th>
                                        <th>{{ __('SOURCE/PRIORITY') }}</th>
                                        <th>{{ __('STATUS') }}</th>
                                        <th>{{ __('CREATED') }}</th>
                                        <th>{{ __('FOLLOW-UPS') }}</th>
                                        <th class="text-end">{{ __('ACTION') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($leads as $lead)
                                        @php
                                            $priority = strtolower($lead['priority'] ?? 'medium');
                                            $pColor = match ($priority) {
                                                'high', 'urgent' => 'danger',
                                                'medium' => 'warning',
                                                'low' => 'info',
                                                default => 'secondary',
                                            };
                                        @endphp
                                        <tr>
                                            <td>
                                                <div class="d-flex flex-column">
                                                    <span
                                                        class="font-weight-bold text-dark">{{ $lead['name'] ?? 'Unknown' }}</span>
                                                    <small class="text-muted"><i class="ti ti-phone-call"></i>
                                                        {{ $lead['phone'] }}</small>
                                                    <small class="text-muted"><i class="ti ti-mail"></i>
                                                        {{ $lead['email'] ?? 'No Email' }}</small>
                                                </div>
                                            </td>
                                            <td>
                                                @if (!empty($lead['assigned_employee']))
                                                    <span
                                                        class="badge bg-light-primary text-primary">{{ $lead['assigned_employee']['name'] }}</span>
                                                @else
                                                    <span class="text-muted small"><i>{{ __('Unassigned') }}</i></span>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="text-muted">
                                                    {{ $lead['business_name'] ?? __('N/A') }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="text-wrap" style="max-width: 200px;">
                                                    <small
                                                        class="text-dark">{{ Str::limit($lead['requirement'] ?? __('No specific requirements'), 50) }}</small>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex flex-column">
                                                    <small
                                                        class="text-muted">{{ ucfirst($lead['source'] ?? 'Direct') }}</small>
                                                    <span class="badge bg-{{ $pColor }} mt-1"
                                                        style="width: fit-content;">{{ ucfirst($priority) }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <span
                                                    class="badge bg-primary rounded-pill px-3">{{ ucfirst($lead['status'] ?? 'New') }}</span>
                                            </td>
                                            <td>{{ \Carbon\Carbon::parse($lead['created_at'])->format('d M, y') }}</td>

                                            <td class="text-center">
                                                <a href="{{ route('employee.leads.followups.index', $lead['uuid']) }}"
                                                    class="btn btn-sm btn-outline-primary">
                                                    <i class="ti ti-calendar-event"></i>
                                                    {{ __('Follow-ups') }}
                                                </a>
                                            </td>

                                            <td class="text-end">
                                                <div class="dropdown">
                                                    <button class="btn btn-sm btn-light dropdown-toggle" type="button"
                                                        data-bs-toggle="dropdown">
                                                        <i class="ti ti-dots-vertical"></i>
                                                    </button>
                                                    <div class="dropdown-menu dropdown-menu-end">
                                                        <a class="dropdown-item" href="#" data-bs-toggle="modal"
                                                            data-bs-target="#editLeadModal"
                                                            data-lead="{{ json_encode($lead) }}">
                                                            <i class="ti ti-edit"></i> {{ __('Edit') }}
                                                        </a>

                                                        {{-- <form action="{{ route('employee.lead.destroy', $lead['uuid']) }}"
                                                            method="POST" onsubmit="return confirm('Delete this lead?');">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit" class="dropdown-item text-danger">
                                                                <i class="ti ti-trash"></i> {{ __('Delete') }}
                                                            </button>
                                                        </form> --}}
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="9" class="text-center py-4">{{ __('No leads found.') }}</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addLeadModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Create New Lead') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('employee.leads.store') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('Full Name') }} <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('Phone Number') }} <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="phone" class="form-control" required>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label">{{ __('Email Address') }}</label>
                                <input type="email" name="email" class="form-control">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('Lead Source') }}</label>
                                <select name="source" class="form-control">
                                    <option value="Direct">Direct</option>
                                    <option value="Website">Website</option>
                                    <option value="Social Media">Social Media</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('Priority') }}</label>
                                <select name="priority" class="form-control">
                                    <option value="low">Low</option>
                                    <option value="medium" selected>Medium</option>
                                    <option value="high">High</option>
                                </select>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">{{ __('Requirement') }}</label>
                                <textarea name="requirement" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Lead</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editLeadModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Edit Lead') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="editLeadForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('Full Name') }}</label>
                                <input type="text" name="name" id="edit_name" class="form-control" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('Phone Number') }}</label>
                                <input type="text" name="phone" id="edit_phone" class="form-control" required>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label">{{ __('Email') }}</label>
                                <input type="email" name="email" id="edit_email" class="form-control">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('Priority') }}</label>
                                <select name="priority" id="edit_priority" class="form-control">
                                    <option value="low">Low</option>
                                    <option value="medium">Medium</option>
                                    <option value="high">High</option>
                                    <option value="urgent">Urgent</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{{ __('Status') }}</label>
                                <select name="status" id="edit_status" class="form-control">
                                    <option value="new">New</option>
                                    <option value="contacted">Contacted</option>
                                    <option value="on_hold">On Hold</option>
                                    <option value="converted">Converted</option>
                                    {{-- <option value="lost">Lost</option> --}}
                                    {{-- <option value="invalid">Invalid</option> --}}
                                </select>
                            </div>

                            <div class="col-md-12 mb-3" id="lost_reason_container" style="display: none;">
                                <label class="form-label text-danger">{{ __('Lost Reason') }}</label>
                                <input type="text" name="lost_reason" id="edit_lost_reason" class="form-control"
                                    placeholder="Enter reason for losing lead">
                            </div>
                            <div class="col-md-12 mb-3" id="invalid_reason_container" style="display: none;">
                                <label class="form-label text-warning">{{ __('Invalid Reason') }}</label>
                                <input type="text" name="invalid_reason" id="edit_invalid_reason"
                                    class="form-control" placeholder="Enter reason for invalid status">
                            </div>

                            <div class="col-12 mb-3">
                                <label class="form-label">{{ __('Requirement') }}</label>
                                <textarea name="requirement" id="edit_requirement" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update Lead</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const editModal = document.getElementById('editLeadModal');
            const statusSelect = document.getElementById('edit_status');
            const lostContainer = document.getElementById('lost_reason_container');
            const invalidContainer = document.getElementById('invalid_reason_container');

            // Logic to show/hide reason fields
            function toggleReasons(status) {
                lostContainer.style.display = (status === 'lost') ? 'block' : 'none';
                invalidContainer.style.display = (status === 'invalid') ? 'block' : 'none';
            }

            if (editModal) {
                editModal.addEventListener('show.bs.modal', event => {
                    const button = event.relatedTarget;
                    const lead = JSON.parse(button.getAttribute('data-lead'));
                    const form = document.getElementById('editLeadForm');

                    // Set dynamic route
                    form.action = `/employee/leads/${lead.uuid}`;

                    // Populate fields
                    document.getElementById('edit_name').value = lead.name || '';
                    document.getElementById('edit_phone').value = lead.phone || '';
                    document.getElementById('edit_email').value = lead.email || '';
                    document.getElementById('edit_priority').value = lead.priority || 'medium';
                    document.getElementById('edit_status').value = lead.status || 'new';
                    document.getElementById('edit_requirement').value = lead.requirement || '';

                    // Populate reasons if they exist
                    document.getElementById('edit_lost_reason').value = lead.lost_reason || '';
                    document.getElementById('edit_invalid_reason').value = lead.invalid_reason || '';

                    // Trigger visibility check on load
                    toggleReasons(lead.status);
                });
            }

            // Listen for status changes in the dropdown
            statusSelect.addEventListener('change', function() {
                toggleReasons(this.value);
            });
        });
    </script>
    @endsection