@extends('layout.app')

@section('content')

    <ol class="breadcrumb bc-3">
        <li><a href="#"><i class="fa-home"></i>Home</a></li>
        <li><a href="#">Call Logs</a></li>
        <li class="active"><strong>Call Logs</strong></li>
    </ol>

    <br/>
    <h3>Call Logs</h3>
    <br/>

    {{-- Filters --}}
    <form method="GET" action="{{ route('log') }}" id="filter-form">
        <div class="row" style="margin-bottom:15px;">
            <div class="col-md-3">
                <label>From Date</label>
                <input type="date" name="from" class="form-control"
                       value="{{ request('from') }}">
            </div>
            <div class="col-md-3">
                <label>To Date</label>
                <input type="date" name="to" class="form-control"
                       value="{{ request('to') }}">
            </div>
            <div class="col-md-3">
                <label>Status</label>
                <select name="status" class="form-control">
                    <option value="">-- All --</option>
                    <option value="Completed" {{ request('status') == 'completed'  ? 'selected' : '' }}>Completed
                    </option>
                    <option value="Dropped" {{ request('status') == 'dropped'  ? 'selected' : '' }}>Dropped
                    </option>

                </select>
            </div>
            <div class="col-md-3" style="padding-top:25px;">
                <button type="submit" class="btn btn-primary">Filter</button>
                <a href="{{ route('log') }}" class="btn btn-default">Reset</a>
            </div>
        </div>
    </form>

    {{-- Export Buttons --}}
    <div style="margin-bottom:10px;">
        <a href="{{ route('log.export', array_merge(request()->all(), ['type' => 'csv'])) }}"
           class="btn btn-success btn-sm">
            <i class="fa fa-download"></i> Export CSV
        </a>
        <a href="{{ route('log.export', array_merge(request()->all(), ['type' => 'pdf'])) }}"
           class="btn btn-danger btn-sm">
            <i class="fa fa-file-pdf-o"></i> Export PDF
        </a>
        <span class="text-muted" style="margin-left:10px;">
        Total: <strong>{{ $leads->count() }}</strong> leads
    </span>
    </div>


    {{-- Table --}}
    <table class="table table-bordered datatable" id="leads-table">
        <thead>
        <tr>
            <th>Type</th>
            <th>Caller Detail</th>
            <th>Timing</th>
            <th>Duration</th>
            <th>Messages</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        @forelse($leads as $lead)
            <tr>
                <td class="text-center" style="vertical-align: middle;">
                    @if($lead->status == 'completed')
                        <i class="fa fa-phone text-success" style="transform: rotate(135deg);" title="Incoming"></i>
                    @else
                        <i class="fa fa-phone text-danger" style="transform: rotate(-45deg);"
                           title="Missed/Dropped"></i>
                    @endif
                </td>
                <td>
                    <strong style="display: block;">{{ $lead->caller_number }}</strong>
                    <small class="text-muted">ID: {{ $lead->call_id ?? 'N/A' }}</small>
                </td>
                <td>
                    <div class="small">
                        {{-- Time: e.g., 04:18 AM --}}
                        <span class="text-dark fw-bold">
            <i class="fa fa-clock-o text-primary"></i>
            {{ \Carbon\Carbon::parse($lead->call_start)->format('h:i A') }}
        </span>
                        <br/>
                        {{-- Date: e.g., 10 Apr 2026 --}}
                        <span class="text-muted" style="font-size: 10px; letter-spacing: 0.5px;">
            <i class="fa fa-calendar-o"></i>
            {{ \Carbon\Carbon::parse($lead->call_start)->format('d M Y') }}
        </span>
                    </div>
                </td>
                <td style="vertical-align: middle;">
                    @php
                        $seconds = $lead->duration_seconds ?? 0;
                        $format = sprintf('%02d:%02d', ($seconds / 60 % 60), $seconds % 60);
                    @endphp
                    <span class="badge badge-secondary"
                          style="background: #f5f5f5; color: #333; border: 1px solid #ddd;">
                    {{ $seconds > 0 ? $format : '00:00' }}
                </span>
                </td>
                <td class="text-center">{{ $lead->total_messages ?? '0' }}</td>
                <td style="vertical-align: middle;">
                <span class="label
                    {{ $lead->status == 'dropped' ? 'label-warning' : 'label-success' }}"
                      style="text-transform: capitalize; border-radius: 12px; padding: 2px 10px;">
                    {{ $lead->status }}
                </span>
                </td>
                <td style="vertical-align: middle;">
                    <a href="{{ route('call.detail', $lead->call_id) }}"
                       class="btn btn-xs btn-info">
                        <i class="fa fa-eye"></i> View
                    </a>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="6" class="text-center text-muted">No call logs found.</td>
            </tr>
        @endforelse
        </tbody>
    </table>

@endsection

@push('scripts')
    <link rel="stylesheet" href="{{asset('assets/js/datatables/datatables.css')}}">
    <script src="{{asset('assets/js/datatables/datatables.js')}}"></script>
    <script>
        jQuery(document).ready(function ($) {
            $('#leads-table').DataTable({
                paging: true,
                searching: true,
                ordering: true,
                order: [[7, 'desc']],
                columnDefs: [
                    {targets: '_all', defaultContent: '—'}
                ],
                drawCallback: function () {
                    // re-apply label colors after redraw
                }
            });
        });
    </script>
@endpush