{{-- resources/views/livewire/admin/call-histories.blade.php --}}
<div class="main-side">
    <div class="content_view">
        <x-admin-alert />
        
        {{-- Header --}}
        <div class="header">
            <div class="d-flex align-items-center gap-3">
                <button onclick="history.back()" class="back-btn">
                    <i class="fas fa-arrow-right"></i>
                </button>
                <h2 class="title">سجل المكالمات</h2>
            </div>
        </div>

        {{-- Statistics Cards --}}
        <div class="stats mb-3">
            <div class="stat-card stat-all {{ $filterType === 'all' ? 'active' : '' }}"
                wire:click="$set('filterType', 'all')">
                <div class="stat-number">{{ $totalCalls }}</div>
                <div class="stat-label">كل المكالمات</div>
            </div>
            <div class="stat-card stat-incoming {{ $filterType === 'incoming' ? 'active' : '' }}"
                wire:click="$set('filterType', 'incoming')">
                <div class="stat-number">{{ $incomingCalls }}</div>
                <div class="stat-label">واردة</div>
            </div>
            <div class="stat-card stat-outgoing {{ $filterType === 'outgoing' ? 'active' : '' }}"
                wire:click="$set('filterType', 'outgoing')">
                <div class="stat-number">{{ $outgoingCalls }}</div>
                <div class="stat-label">صادرة</div>
            </div>
            <div class="stat-card stat-missed {{ $filterType === 'missed' ? 'active' : '' }}"
                wire:click="$set('filterType', 'missed')">
                <div class="stat-number">{{ $missedCalls }}</div>
                <div class="stat-label">لم يتم الرد عليها</div>
            </div>
        </div>

        {{-- Filters --}}
        <div class="stats mb-3">
            <div class="row g-2">
                <div class="col-12 col-md-4 col-lg-3 col-xl-2">
                    <div class="inp-holder">
                        <input type="text" 
                            class="form-control" 
                            placeholder="بحث برقم الجوال"
                            wire:model.live.debounce.500ms="searchPhone">
                    </div>
                </div>
                <div class="col-12 col-md-4 col-lg-3 col-xl-2">
                    <div class="input-group">
                        <span class="input-group-text">من</span>
                        <input type="date" 
                            class="form-control" 
                            wire:model.live="from">
                    </div>
                </div>
                <div class="col-12 col-md-4 col-lg-3 col-xl-2">
                    <div class="input-group">
                        <span class="input-group-text">الى</span>
                        <input type="date" 
                            class="form-control" 
                            wire:model.live="to">
                    </div>
                </div>
            </div>
        </div>

        {{-- Table Header --}}
        <div class="call-header">
            <div>الحالة</div>
            <div>النوع</div>
            <div class="text-center">الوقت</div>
            <div class="text-center">المدة</div>
            <div class="text-center">الإجراءات</div>
        </div>

        {{-- Call List --}}
        <div class="call-list">
            @php
                $icons = [
                    'incoming' => '↗',
                    'outgoing' => '↙',
                    'missed' => '✗',
                    'voiceMail' => '📩',
                    'rejected' => '✗',
                    'blocked' => '🚫',
                    'answeredExternally' => '📞',
                    'unknown' => '?',
                    'wifiIncoming' => '📶↗',
                    'wifiOutgoing' => '📶↙',
                ];
            @endphp

            @forelse ($calls as $call)
                <div class="call-item" data-type="{{ $call->type }}">
                    <div class="call-content">
                        <div class="call-status status-{{ $call->type }}">
                            {{ $icons[$call->type] ?? $icons['unknown'] }}
                        </div>
                        <div class="call-info">
                            <h3>{{ $call->phone ?: $call->client?->phone }}</h3>
                            <p>{{ __($call->type) }}</p>
                        </div>
                        <div class="call-time">
                            {{ $call->date . ' - ' . arabic_time($call->time) }}
                        </div>
                        <div class="call-duration mx-auto">
                            {{ $call->duration }}
                            <i class="fas fa-clock-rotate-left fs-11px"></i>
                        </div>
                        <div class="call-actions">
                            @if (!$call->client)
                                <button type="button" 
                                    class="action-btn btn-client" 
                                    title="اضافة عميل"
                                    wire:click="setCurrentCall({{ $call->id }}, '{{ $call->phone }}')"
                                    data-bs-toggle="modal" 
                                    data-bs-target="#addClientModal">
                                    <i class="fas fa-user-plus"></i>
                                </button>
                            @endif
                            <a href="tel:{{ $call->phone }}" 
                                class="action-btn btn-call" 
                                title="اتصال">
                                <i class="fas fa-phone"></i>
                            </a>
                            <button class="action-btn btn-delete" 
                                onclick="confirmDelete({{ $call->id }})"
                                title="حذف">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            @empty
                <div class="alert alert-warning text-center">
                    لا توجد مكالمات
                </div>
            @endforelse

            {{-- Pagination --}}
            <div class="mt-3">
                {{ $calls->links() }}
            </div>
        </div>

        {{-- Add Client Modal --}}
        <div class="modal fade" id="addClientModal" tabindex="-1" aria-hidden="true" wire:ignore.self>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5">إضافة عميل جديد</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form wire:submit.prevent="addClient">
                            <div class="mb-3">
                                <label for="clientPhone" class="form-label">رقم الهاتف</label>
                                <input type="text" 
                                    class="form-control" 
                                    value="{{ $clientPhone }}" 
                                    disabled>
                            </div>

                            <div class="mb-3">
                                <label for="clientName" class="form-label">اسم العميل <span class="text-danger">*</span></label>
                                <input type="text" 
                                    class="form-control @error('clientName') is-invalid @enderror" 
                                    id="clientName" 
                                    wire:model="clientName"
                                    placeholder="أدخل اسم العميل">
                                @error('clientName')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="city_id" class="form-label">المدينة</label>
                                <select wire:model="city_id" 
                                    class="form-control @error('city_id') is-invalid @enderror" 
                                    id="city_id">
                                    <option value="">اختر المدينة</option>
                                    @foreach ($cities as $city)
                                        <option value="{{ $city->id }}">{{ $city->name }}</option>
                                    @endforeach
                                </select>
                                @error('city_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="program_id" class="form-label">الخدمة</label>
                                <select wire:model="program_id" 
                                    class="form-control @error('program_id') is-invalid @enderror" 
                                    id="program_id">
                                    <option value="">اختر الخدمة</option>
                                    @foreach ($programs as $program)
                                        <option value="{{ $program->id }}">{{ $program->name }}</option>
                                    @endforeach
                                </select>
                                @error('program_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="client_status" class="form-label">الحالة <span class="text-danger">*</span></label>
                                <select wire:model="client_status" 
                                    class="form-control @error('client_status') is-invalid @enderror" 
                                    id="client_status">
                                    <option value="">اختر الحالة</option>
                                    @foreach (\App\Enums\ClientStatus::cases() as $statusOption)
                                        <option value="{{ $statusOption->value }}">{{ $statusOption->label() }}</option>
                                    @endforeach
                                </select>
                                @error('client_status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                        <button type="button" 
                            class="btn btn-primary" 
                            wire:click="addClient"
                            wire:loading.attr="disabled">
                            <span wire:loading.remove wire:target="addClient">حفظ</span>
                            <span wire:loading wire:target="addClient">
                                <span class="spinner-border spinner-border-sm me-1"></span>
                                جاري الحفظ...
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Styles --}}
@push('styles')
<style>
    .status-voiceMail { background-color: #6a1b9a; }
    .status-rejected { background-color: #d32f2f; }
    .status-blocked { background-color: #000000; }
    .status-answeredExternally { background-color: #1976d2; }
    .status-unknown { background-color: #9e9e9e; }
    .status-wifiIncoming { background-color: #388e3c; }
    .status-wifiOutgoing { background-color: #fbc02d; }
</style>
@endpush

{{-- Scripts --}}
@push('scripts')
<script>
    function confirmDelete(callId) {
        Swal.fire({
            title: 'هل أنت متأكد؟',
            text: 'لن تتمكن من استعادة هذا السجل!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'نعم، احذف!',
            cancelButtonText: 'إلغاء',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                @this.call('deleteCall', callId);
            }
        });
    }

    // Close modal and reset form on successful save
    window.addEventListener('alert', event => {
        if (event.detail.type === 'success') {
            const modal = bootstrap.Modal.getInstance(document.getElementById('addClientModal'));
            if (modal) {
                modal.hide();
            }
        }
    });
</script>
@endpush