@extends('admin.layouts.app')

@section('title','Lead Management')

@section('content')

@php
    $hasFullAccess = auth('admin')->check() || (auth('staff')->check() && strcasecmp(auth('staff')->user()->designation?->name ?? '', 'Super Admin') === 0);
    $canManageLeads = $hasFullAccess || auth('staff')->check();
@endphp

<div class="page-header">

    <div>
        <h2>Lead Management</h2>
        <p>Manage customer enquiries and follow-ups</p>
    </div>

    @if($canManageLeads)<a href="{{ route('admin.leads.create') }}" class="btn-primary">
        <i class="fas fa-plus"></i> Add Lead
    </a>@endif

</div>

@if(session('success'))
<div class="alert alert-success">
    {{ session('success') }}
</div>
@endif

@if(session('error'))
<div class="alert alert-danger">
    {{ session('error') }}
</div>
@endif

<div class="table-card">

<table class="admin-table data-table">

<thead>

<tr>

    <th>S.No</th>

    <th>Lead No</th>

    <th>Customer</th>

    <th>Mobile</th>

    <th>Customer Type</th>

    <th>Enquiry Type</th>

    <th>Next Call Date</th>

    <th>Follow-ups</th>

    <th>Latest Follow-up</th>

    <th class="no-sort">Timeline</th>

    <th>Status</th>

    @if($canManageLeads)<th width="190" class="no-sort">Action</th>@endif

</tr>

</thead>

<tbody>

@foreach($leads as $key=>$lead)

<tr>

    <td>{{ $key+1 }}</td>

    <td>{{ $lead->lead_number }}</td>

    <td>{{ $lead->customer->customer_name ?? '-' }}</td>

    <td>{{ $lead->customer->mobile ?? '-' }}</td>

    <td>{{ $lead->customer->customer_type ?? '-' }}</td>

    <td>{{ $lead->enquiry_type }}</td>

    <td>
        {{ $lead->next_call_date
            ? \Carbon\Carbon::parse($lead->next_call_date)->format('d-m-Y')
            : '-' }}
    </td>

    <td>
        <span>{{ $lead->followup_count }}</span>

        @if($canManageLeads && $lead->status !== 'Converted' && $lead->status !== 'Rejected')
            <button type="button"
                    class="btn-sm btn-add-followup js-open-followup"
                    title="Add Follow-up"
                    data-action="{{ route('leads.followups.store', $lead->id) }}"
                    data-lead="{{ $lead->lead_number }}">
                <i class="fas fa-plus"></i>
            </button>
        @endif
    </td>

    <td>
        @if($lead->latestFollowUp)
            <div>
                <strong>{{ $lead->latestFollowUp->followup_status }}</strong><br>
                <small>{{ $lead->latestFollowUp->remarks }}</small><br>
                <small class="text-muted">
                    {{ \Carbon\Carbon::parse($lead->latestFollowUp->followup_date)->format('d-m-Y') }}
                </small>
            </div>
        @else
            <span class="text-muted">No Follow-up</span>
        @endif
    </td>

    <td>
        <a href="{{ route('leads.followups.index', $lead->id) }}"
        class="btn-sm btn-timeline"
        title="View Follow-up Timeline">
            <i class="fas fa-stream"></i>
        </a>
    </td>

    <td>

        @php
            $class='badge-success';

            if($lead->status=='Follow Up'){
                $class='badge-warning';
            }

            elseif($lead->status=='Converted'){
                $class='badge-primary';
            }

            elseif(in_array($lead->status,['Rejected','Lost'])){
                $class='badge-danger';
            }
        @endphp

        <span class="badge {{ $class }}">
            {{ $lead->status }}
        </span>

    </td>

    @if($canManageLeads)<td>

        @if($hasFullAccess)
        @if($lead->status !== 'Converted' && $lead->status !== 'Rejected')
            <button type="button"
                    class="btn-sm btn-success js-open-convert"
                    title="Convert Lead"
                    data-action="{{ route('admin.leads.convert', $lead->id) }}"
                    data-lead="{{ $lead->lead_number }}"
                    data-customer="{{ $lead->customer->customer_name ?? '-' }}"
                    data-enquiry="{{ $lead->enquiry_type ?? '-' }}">
                <i class="fas fa-check"></i>
            </button>
        @elseif($lead->status === 'Converted')
                <a href="{{ route('admin.quotations.createFromLead', $lead->id) }}"
                class="btn-sm btn-success"
                title="Create Quotation">
                    <i class="fas fa-file-invoice"></i>
                </a>
        @else
            <button type="button"
                    class="btn-sm btn-success"
                    title="Create Quotation">
                <i class="fas fa-file-invoice"></i>
            </button>
        @endif

        <a href="{{ route('admin.leads.edit',$lead->id) }}"
           class="btn-sm btn-edit">

            <i class="fas fa-edit"></i>

        </a>

        <form action="{{ route('admin.leads.destroy',$lead->id) }}"
              method="POST"
              class="d-inline"
              onsubmit="return confirm('Delete this lead?')">

            @csrf
            @method('DELETE')

            <button class="btn-sm btn-delete">

                <i class="fas fa-trash"></i>

            </button>

        </form>
        @else
        <a href="{{ route('admin.leads.edit', $lead->id) }}" class="btn-sm btn-edit" title="Edit Lead"><i class="fas fa-edit"></i></a>
        @endif

    </td>@endif

</tr>

@endforeach

</tbody>

</table>

</div>

<div class="lead-modal" id="addFollowupModal" aria-hidden="true">
    <div class="lead-modal-backdrop js-close-modal"></div>
    <div class="lead-modal-dialog">
        <form method="POST" class="lead-modal-content" id="addFollowupForm">
            @csrf
            <input type="hidden" name="redirect_to" value="leads_index">

            <div class="lead-modal-header">
                <div>
                    <h3>Add Follow-up</h3>
                    <p id="followupLeadNo">Lead</p>
                </div>
                <button type="button" class="modal-close js-close-modal" title="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="lead-modal-body">
                <div class="form-group">
                    <label>Follow-up Date *</label>
                    <input type="date" name="followup_date" value="{{ date('Y-m-d') }}" required>
                </div>

                <div class="form-group">
                    <label>Follow-up Status *</label>
                    <select name="followup_status" required>
                        <option value="">Select Status</option>
                        <option value="Contacted">Contacted</option>
                        <option value="Follow-up">Follow-up</option>
                        <option value="Interested">Interested</option>
                        <option value="No Answer">No Answer</option>
                        <option value="Busy">Busy</option>
                        <option value="Lost">Lost</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Remarks *</label>
                    <textarea name="remarks" rows="3" required></textarea>
                </div>

                <div class="form-group">
                    <label>Next Call Date</label>
                    <input type="date" name="next_followup_date">
                </div>
            </div>

            <div class="lead-modal-footer">
                <button type="button" class="btn-secondary js-close-modal">Cancel</button>
                <button type="submit" class="btn-primary">Save Follow-up</button>
            </div>
        </form>
    </div>
</div>

<div class="lead-modal" id="convertLeadModal" aria-hidden="true">
    <div class="lead-modal-backdrop js-close-modal"></div>
    <div class="lead-modal-dialog">
        <form method="POST" class="lead-modal-content" id="convertLeadForm">
            @csrf

            <div class="lead-modal-header">
                <div>
                    <h3>Convert Lead</h3>
                    <p id="convertLeadNo">Lead</p>
                </div>
                <button type="button" class="modal-close js-close-modal" title="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="lead-modal-body">
                <div class="form-group">
                    <label>Lead Number</label>
                    <input type="text" id="convertLeadNumber" readonly>
                </div>

                <div class="form-group">
                    <label>Customer</label>
                    <input type="text" id="convertCustomerName" readonly>
                </div>

                <div class="form-group">
                    <label>Enquiry Type</label>
                    <input type="text" id="convertEnquiryType" readonly>
                </div>

                <div class="form-group">
                    <label>Conversion Remarks</label>
                    <textarea name="conversion_remarks"
                              rows="3"
                              placeholder="Enter conversion remarks"></textarea>
                </div>
            </div>

            <div class="lead-modal-footer">
                <button type="button" class="btn-secondary js-close-modal">Cancel</button>
                <button type="submit" class="btn-primary">Convert Lead</button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const addModal = document.getElementById('addFollowupModal');
    const addForm = document.getElementById('addFollowupForm');
    const followupLeadNo = document.getElementById('followupLeadNo');

    const convertModal = document.getElementById('convertLeadModal');
    const convertForm = document.getElementById('convertLeadForm');
    const convertLeadNo = document.getElementById('convertLeadNo');
    const convertLeadNumber = document.getElementById('convertLeadNumber');
    const convertCustomerName = document.getElementById('convertCustomerName');
    const convertEnquiryType = document.getElementById('convertEnquiryType');

    function openModal(modal) {
        if (!modal) return;
        modal.classList.add('show');
        modal.setAttribute('aria-hidden', 'false');
        document.body.classList.add('modal-open');
    }

    function closeModal(modal) {
        if (!modal) return;
        modal.classList.remove('show');
        modal.setAttribute('aria-hidden', 'true');
        document.body.classList.remove('modal-open');
    }

    document.querySelectorAll('.js-open-followup').forEach(function (button) {
        button.addEventListener('click', function () {
            addForm.action = button.dataset.action;
            followupLeadNo.textContent = button.dataset.lead || 'Lead';
            openModal(addModal);
        });
    });

    document.querySelectorAll('.js-open-convert').forEach(function (button) {
        button.addEventListener('click', function () {
            convertForm.action = button.dataset.action;

            convertLeadNo.textContent = button.dataset.lead || 'Lead';
            convertLeadNumber.value = button.dataset.lead || '-';
            convertCustomerName.value = button.dataset.customer || '-';
            convertEnquiryType.value = button.dataset.enquiry || '-';

            openModal(convertModal);
        });
    });

    document.querySelectorAll('.js-close-modal').forEach(function (button) {
        button.addEventListener('click', function () {
            closeModal(button.closest('.lead-modal'));
        });
    });

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape') {
            document.querySelectorAll('.lead-modal.show').forEach(closeModal);
        }
    });
});
</script>

@endsection