@extends('admin.layouts.app')

@section('title', 'Lead Follow-up Timeline')

@section('content')

<div class="page-header">
    <div>
        <h2>Follow-up Timeline</h2>
        <p>
            {{ $lead->lead_number ?? '-' }} -
            {{ $lead->customer->customer_name ?? '-' }}
        </p>
    </div>

    <div class="form-actions timeline-actions">
        @if($lead->status !== 'Converted' && $lead->status !== 'Rejected')
            <button type="button" class="btn-primary js-open-followup">
                <i class="fas fa-plus"></i> Add Follow-up
            </button>
        @endif

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

@if($lead->status === 'Converted' || $lead->status === 'Rejected')
    <div class="alert alert-warning">
        This lead is {{ $lead->status }}. New follow-up cannot be added.
    </div>
@endif

<div class="timeline-summary">
    <div>
        <span>Customer</span>
        <strong>{{ $lead->customer->customer_name ?? '-' }}</strong>
    </div>
    <div>
        <span>Enquiry Type</span>
        <strong>{{ $lead->enquiry_type ?? '-' }}</strong>
    </div>
    <div>
        <span>Status</span>
        <strong>{{ $lead->status ?? '-' }}</strong>
    </div>
    <div>
        <span>Next Call Date</span>
        <strong>
            {{ $lead->next_call_date ? \Carbon\Carbon::parse($lead->next_call_date)->format('d-m-Y') : '-' }}
        </strong>
    </div>
    <div>
        <span>Total Follow-ups</span>
        <strong>{{ $followUps->count() }}</strong>
    </div>
</div>

<div class="timeline-card">
    @forelse($followUps as $followup)
        <div class="timeline-item">
            <div class="timeline-icon">
                <i class="fas fa-phone-alt"></i>
            </div>

            <div class="timeline-content">
                <div class="timeline-top">
                    <strong>{{ $followup->followup_status }}</strong>
                    <span>{{ \Carbon\Carbon::parse($followup->followup_date)->format('d-m-Y') }}</span>
                </div>

                <p>{{ $followup->remarks }}</p>

                <small>
                    Next Call:
                    {{ $followup->next_followup_date ? \Carbon\Carbon::parse($followup->next_followup_date)->format('d-m-Y') : '-' }}
                </small>
                <small>
                    Added By: {{ $followup->createdBy->name ?? '-' }}
                </small>
            </div>
        </div>
    @empty
        <div class="empty-timeline">No follow-up found.</div>
    @endforelse
</div>

@if($lead->status !== 'Converted' && $lead->status !== 'Rejected')
<div class="lead-modal" id="addFollowupModal" aria-hidden="true">
    <div class="lead-modal-backdrop js-close-modal"></div>
    <div class="lead-modal-dialog">
        <form action="{{ route('leads.followups.store', $lead->id) }}" method="POST" class="lead-modal-content">
            @csrf

            <div class="lead-modal-header">
                <div>
                    <h3>Add Follow-up</h3>
                    <p>{{ $lead->lead_number ?? '-' }}</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>
@endif

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

    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 () {
            openModal(addModal);
        });
    });

    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