@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap mb-3">
    <div>
        <h4 class="mb-0">Call Parking</h4>
        <div class="text-secondary small mt-1">Park live calls on a shared slot and pick them up from any phone.</div>
    </div>
    <div class="d-inline-flex gap-2">
        <form method="POST" action="{{ route('apps.parking.sync') }}" class="d-inline">
            @csrf
            <button class="btn btn-outline-primary btn-sm">
                <i data-lucide="refresh-cw" style="width:14px;height:14px;vertical-align:-2px;"></i>
                Sync Dialplan
            </button>
        </form>
        <a href="{{ route('apps.parking.create') }}" class="btn btn-primary btn-sm">
            <i data-lucide="plus" style="width:14px;height:14px;vertical-align:-2px;"></i>
            New Parking Lot
        </a>
    </div>
</div>

@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if($lots->isEmpty())
    <div class="card">
        <div class="card-body text-center text-secondary py-5">
            <i data-lucide="square-parking" style="width:42px;height:42px;opacity:.4;"></i>
            <p class="mt-3 mb-1 fw-medium">No parking lots yet</p>
            <p class="small mb-3">Create a lot to let staff park calls and retrieve them from any extension.</p>
            <a href="{{ route('apps.parking.create') }}" class="btn btn-primary btn-sm">Create your first lot</a>
        </div>
    </div>
@else
    <div class="card">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th style="width:110px;">Park Code</th>
                        <th style="width:140px;">Slots</th>
                        <th style="width:110px;">Hold Time</th>
                        <th style="width:150px;">On Timeout</th>
                        <th class="text-center" style="width:90px;">Status</th>
                        <th class="text-end" style="width:140px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($lots as $lot)
                    <tr>
                        <td>
                            <div class="fw-medium">{{ $lot->name }}</div>
                            @if($lot->description)<div class="text-secondary small">{{ $lot->description }}</div>@endif
                        </td>
                        <td><code style="font-weight:700;background:#f1f5f9;padding:3px 8px;border-radius:4px;">{{ $lot->park_code }}</code></td>
                        <td class="text-secondary">{{ $lot->slot_start }}–{{ $lot->slotEnd() }} <span class="small">({{ $lot->num_slots }})</span></td>
                        <td class="text-secondary">{{ $lot->parking_time }}s</td>
                        <td class="text-secondary small">
                            @if($lot->comeback_to_origin)
                                Return to parker
                            @elseif($lot->timeout_value)
                                Go to {{ $lot->timeout_value }}
                            @else
                                <span class="text-warning">Not set</span>
                            @endif
                        </td>
                        <td class="text-center">
                            @if($lot->is_active)
                                <span class="badge bg-success">Active</span>
                            @else
                                <span class="badge bg-secondary">Disabled</span>
                            @endif
                        </td>
                        <td class="text-end">
                            <div class="d-inline-flex gap-1">
                                <a href="{{ route('apps.parking.edit', $lot) }}" class="btn btn-outline-primary btn-sm">Edit</a>
                                <form method="POST" action="{{ route('apps.parking.destroy', $lot) }}" class="d-inline"
                                      onsubmit="return confirm('Delete parking lot \'{{ $lot->name }}\'? Any calls parked here will be dropped.');">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-outline-danger btn-sm">Delete</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="text-secondary small mt-3">
        <i data-lucide="info" style="width:13px;height:13px;vertical-align:-2px;"></i>
        To park a call, transfer it to the <strong>park code</strong>. To pick it up, dial the announced <strong>slot number</strong> from any phone.
    </div>
@endif
@endsection