@extends('layouts.app')

@section('title', 'Data Pemancar Radio (FM / AM)')

@section('page_header')
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
    <div>
        <h4 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
            <i class="fa-solid fa-radio text-primary"></i> Data Pemancar Radio (FM & AM)
        </h4>
        <small class="text-muted">Inventaris spesifikasi teknis pemancar utama dan pemancar cadangan</small>
    </div>
    <a href="{{ route('transmitters.create') }}" class="btn btn-primary">
        <i class="fa-solid fa-plus me-1"></i> Tambah Pemancar Baru
    </a>
</div>
@endsection

@section('content')
<div class="row g-3">
    @foreach($transmitters as $tx)
    @php
        $badgeClass = match($tx->status) {
            'active' => 'bg-success',
            'standby' => 'bg-warning text-dark',
            'maintenance' => 'bg-info text-dark',
            default => 'bg-danger',
        };
    @endphp
    <div class="col-12 col-md-6 col-xl-3">
        <div class="card card-engineering h-100">
            <div class="card-header">
                <div>
                    <span class="badge bg-dark font-mono me-1">{{ $tx->type }}</span>
                    <strong>{{ $tx->code }}</strong>
                </div>
                <span class="badge {{ $badgeClass }} text-uppercase">{{ $tx->status }}</span>
            </div>

            <div class="card-body p-3">
                <h6 class="fw-bold text-dark mb-1">{{ $tx->name }}</h6>
                <div class="text-primary font-mono fw-semibold fs-5 mb-2">{{ $tx->frequency }}</div>

                <ul class="list-unstyled small text-muted mb-3 font-mono">
                    <li class="mb-1"><i class="fa-solid fa-bolt text-warning me-2"></i>Daya Target: <strong>{{ $tx->formatted_power }}</strong></li>
                    <li class="mb-1"><i class="fa-solid fa-tag text-secondary me-2"></i>Model: {{ $tx->brand_model ?? '-' }}</li>
                    <li class="mb-1"><i class="fa-solid fa-location-dot text-danger me-2"></i>Site: {{ $tx->site_location ?? '-' }}</li>
                    <li><i class="fa-solid fa-database text-info me-2"></i>Total Log: <strong>{{ $tx->logs_count }} entri</strong></li>
                </ul>

                @if($tx->notes)
                <div class="p-2 bg-light border rounded small text-secondary">
                    {{ Str::limit($tx->notes, 75) }}
                </div>
                @endif
            </div>

            <div class="card-footer bg-light p-2 d-flex justify-content-between align-items-center">
                <a href="{{ route('transmitters.show', $tx->id) }}" class="btn btn-outline-info btn-sm">
                    <i class="fa-solid fa-chart-line me-1"></i> Detail
                </a>
                <div class="btn-group btn-group-sm">
                    <a href="{{ route('transmitters.edit', $tx->id) }}" class="btn btn-outline-primary" title="Ubah Spesifikasi">
                        <i class="fa-solid fa-pen-to-square"></i>
                    </a>
                    <button type="button" class="btn btn-outline-danger btn-delete-tx" data-id="{{ $tx->id }}" data-name="{{ $tx->name }}" title="Hapus">
                        <i class="fa-solid fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>
@endsection

@push('scripts')
<script>
    $(document).on('click', '.btn-delete-tx', function() {
        const id = $(this).data('id');
        const name = $(this).data('name');

        Swal.fire({
            title: 'Hapus Pemancar Ini?',
            text: `Yakin ingin menghapus ${name}? Semua data logbook terkait pemancar ini akan ikut terhapus.`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc2626',
            cancelButtonColor: '#64748b',
            confirmButtonText: 'Ya, Hapus Pemancar',
            cancelButtonText: 'Batal'
        }).then((res) => {
            if (res.isConfirmed) {
                $.ajax({
                    url: `/transmitters/${id}`,
                    type: 'DELETE',
                    success: function(resp) {
                        Swal.fire('Terhapus', resp.message, 'success').then(() => {
                            location.reload();
                        });
                    },
                    error: function() {
                        Swal.fire('Gagal', 'Terjadi kesalahan sistem.', 'error');
                    }
                });
            }
        });
    });
</script>
@endpush