@extends('layouts.app')
@section('title', 'المكالمات')
@section('page_title', 'سجل المكالمات')
@section('page_subtitle', 'كل مكالمة تتحول إلى سجل قابل للبحث والمراجعة')

@section('page_actions')
    @if (auth()->user()->hasPermission('calls.export'))
        <a class="btn btn-outline-secondary" id="btnExport" href="{{ route('calls.export') }}"><i class="bi bi-download"></i> تصدير</a>
    @endif
    @if (auth()->user()->hasPermission('calls.create'))
        <a class="btn btn-primary" href="{{ route('calls.create') }}"><i class="bi bi-plus-lg"></i> تسجيل مكالمة</a>
    @endif
@endsection

@section('content')
<div class="card mb-3">
    <div class="card-body">
        <div class="row g-2">
            <div class="col-md-2">
                <input type="date" class="form-control form-control-sm" id="filterFrom" value="{{ now()->startOfMonth()->toDateString() }}">
            </div>
            <div class="col-md-2">
                <input type="date" class="form-control form-control-sm" id="filterTo" value="{{ now()->toDateString() }}">
            </div>
            <div class="col-md-2">
                <select class="form-select form-select-sm" id="filterAgent">
                    <option value="">كل الموظفين</option>
                    @foreach ($agents as $agent)
                        <option value="{{ $agent->id }}">{{ $agent->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select form-select-sm" id="filterCampaign">
                    <option value="">كل الحملات</option>
                    @foreach ($campaigns as $campaign)
                        <option value="{{ $campaign->id }}">{{ $campaign->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select form-select-sm" id="filterStatus">
                    <option value="">كل الحالات</option>
                    @foreach (\App\Models\Call::STATUSES as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select form-select-sm" id="filterDirection">
                    <option value="">كل الاتجاهات</option>
                    @foreach (\App\Models\Call::DIRECTIONS as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <select class="form-select form-select-sm" id="filterDisposition">
                    <option value="">كل النتائج</option>
                    @foreach ($dispositions as $disposition)
                        <option value="{{ $disposition->id }}">{{ $disposition->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <input type="text" class="form-control form-control-sm" id="filterPhone" placeholder="بحث برقم الهاتف" dir="ltr">
            </div>
            <div class="col-md-3">
                <button class="btn btn-sm btn-primary w-100" id="btnFilter"><i class="bi bi-funnel"></i> تطبيق الفلاتر</button>
            </div>
            <div class="col-md-3">
                <button class="btn btn-sm btn-outline-secondary w-100" id="btnReset"><i class="bi bi-arrow-counterclockwise"></i> إعادة ضبط</button>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body table-responsive">
        <table class="table table-hover table-striped w-100" id="callsTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>التاريخ والوقت</th>
                    <th>الاتجاه</th>
                    <th>العميل / الرقم</th>
                    <th>الموظف</th>
                    <th>الحملة</th>
                    <th>الحالة</th>
                    <th>النتيجة</th>
                    <th>مدة الكلام</th>
                    <th>المدة</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    function filters() {
        return {
            date_from: $('#filterFrom').val(),
            date_to: $('#filterTo').val(),
            agent_id: $('#filterAgent').val(),
            campaign_id: $('#filterCampaign').val(),
            status: $('#filterStatus').val(),
            direction: $('#filterDirection').val(),
            disposition_id: $('#filterDisposition').val(),
            phone: $('#filterPhone').val()
        };
    }

    const table = MR.table('#callsTable', '{{ route('calls.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'started', name: 'started_at' },
        { data: 'direction_label', orderable: false, searchable: false },
        { data: 'customer_label', orderable: false },
        { data: 'agent_label', name: 'agent_name' },
        { data: 'campaign_label', orderable: false },
        { data: 'status_badge', name: 'status' },
        { data: 'disposition_label', orderable: false, searchable: false },
        { data: 'talk_label', name: 'talk_time' },
        { data: 'duration_label', name: 'duration' },
        { data: 'actions', orderable: false, searchable: false }
    ], { filters: filters });

    $('#btnFilter').on('click', function () { table.ajax.reload(); });
    $('#filterAgent, #filterCampaign, #filterStatus, #filterDirection, #filterDisposition').on('change', function () { table.ajax.reload(); });
    $('#btnReset').on('click', function () {
        $('#filterAgent, #filterCampaign, #filterStatus, #filterDirection, #filterDisposition, #filterPhone').val('');
        table.ajax.reload();
    });

    $('#callsTable').on('click', '[data-action=delete]', function () {
        MR.remove($(this).data('url'), function () { table.ajax.reload(null, false); });
    });

    $('#btnExport').on('click', function (e) {
        e.preventDefault();
        window.location = '{{ route('calls.export') }}?date_from=' + $('#filterFrom').val() + '&date_to=' + $('#filterTo').val();
    });
});
</script>
@endpush