@extends('layouts.app')

@section('title', 'Binding Pelanggan')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-link text-warning me-2"></i>
                        Binding Pelanggan ke Customer Akun
                    </h5>
                    <small class="text-muted">Menghubungkan nomor layanan pelanggan dengan akun customer portal</small>
                </div>
                <div class="card-body">
                    
                    <!-- Form Binding -->
                    <div class="row">
                        <div class="col-md-8">
                            <form action="{{ route('pelanggan.binding.store') }}" method="POST" id="bindingForm">
                                @csrf
                                
                                <div class="row">
                                    <!-- Select Customer Akun -->
                                    <div class="col-md-6 mb-3">
                                        <label for="customer_akun_id" class="form-label">
                                            <i class="fas fa-user-circle me-1"></i>
                                            Customer Akun <span class="text-danger">*</span>
                                        </label>
                                        <select name="customer_akun_id" id="customer_akun_id" class="form-select @error('customer_akun_id') is-invalid @enderror" required>
                                            <option value="">-- Pilih Customer Akun --</option>
                                            @foreach($customerAkuns as $customer)
                                                <option value="{{ $customer->id }}" {{ old('customer_akun_id') == $customer->id ? 'selected' : '' }}
                                                    data-email="{{ $customer->email }}" 
                                                    data-whatsapp="{{ $customer->no_whatsapp }}"
                                                    data-nomer-layanan="{{ $customer->nomer_layanan }}">
                                                    {{ $customer->nama }} ({{ $customer->email }})
                                                    @if($customer->nomer_layanan)
                                                        - <span class="text-success">Sudah Binding: {{ $customer->nomer_layanan }}</span>
                                                    @else
                                                        - <span class="text-warning">Belum Binding</span>
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('customer_akun_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Select Pelanggan -->
                                    <div class="col-md-6 mb-3">
                                        <label for="pelanggan_id" class="form-label">
                                            <i class="fas fa-users me-1"></i>
                                            Pelanggan <span class="text-danger">*</span>
                                        </label>
                                        <select name="pelanggan_id" id="pelanggan_id" class="form-select @error('pelanggan_id') is-invalid @enderror" required>
                                            <option value="">-- Pilih Pelanggan --</option>
                                            @foreach($pelanggans as $pelanggan)
                                                <option value="{{ $pelanggan->id }}" {{ old('pelanggan_id') == $pelanggan->id ? 'selected' : '' }}
                                                    data-nomer-layanan="{{ $pelanggan->nomer_layanan }}"
                                                    data-nama="{{ $pelanggan->nama_lengkap }}"
                                                    data-whatsapp="{{ $pelanggan->no_hp_whatsapp }}"
                                                    data-email="{{ $pelanggan->email }}">
                                                    {{ $pelanggan->nomer_layanan }} - {{ $pelanggan->nama_lengkap }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('pelanggan_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Submit Button -->
                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <button type="submit" class="btn btn-primary">
                                            <i class="fas fa-link me-2"></i>
                                            Binding Sekarang
                                        </button>
                                        <button type="button" class="btn btn-secondary" onclick="document.getElementById('bindingForm').reset()">
                                            <i class="fas fa-undo me-2"></i>
                                            Reset
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!-- Info Panel -->
                        <div class="col-md-4">
                            <div class="card border-info">
                                <div class="card-header bg-info text-white">
                                    <h6 class="mb-0">
                                        <i class="fas fa-info-circle me-2"></i>
                                        Informasi Binding
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <ul class="list-unstyled mb-0">
                                        <li class="mb-2">
                                            <i class="fas fa-check-circle text-success me-2"></i>
                                            Binding menghubungkan akun customer dengan nomor layanan
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-user-shield text-primary me-2"></i>
                                            Customer dapat login ke portal dengan akun yang sudah dibinding
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-file-invoice text-warning me-2"></i>
                                            Customer dapat melihat invoice dan riwayat pembayaran
                                        </li>
                                        <li class="mb-0">
                                            <i class="fas fa-sync-alt text-info me-2"></i>
                                            Binding dapat diubah kapan saja jika diperlukan
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Current Bindings Table -->
                    <div class="row mt-4">
                        <div class="col-md-12">
                            <h5><i class="fas fa-list me-2"></i>Binding Terkini</h5>
                            <div class="table-responsive">
                                <table class="table table-striped table-hover">
                                    <thead class="table-dark">
                                        <tr>
                                            <th>#</th>
                                            <th>Customer Akun</th>
                                            <th>Email</th>
                                            <th>Nomor Layanan</th>
                                            <th>Nama Pelanggan</th>
                                            <th>Status</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($currentBindings as $index => $binding)
                                            <tr>
                                                <td>{{ $index + 1 }}</td>
                                                <td>{{ $binding->nama }}</td>
                                                <td>{{ $binding->email }}</td>
                                                <td>
                                                    <span class="badge bg-primary">{{ $binding->nomer_layanan }}</span>
                                                </td>
                                                <td>{{ $binding->pelanggan->nama_lengkap ?? '-' }}</td>
                                                <td>
                                                    <span class="badge bg-success">
                                                        <i class="fas fa-check-circle me-1"></i>
                                                        Terhubung
                                                    </span>
                                                </td>
                                                <td>
                                                    <form action="{{ route('pelanggan.binding.unbind', $binding->id) }}" method="POST" class="d-inline" 
                                                          onsubmit="return confirm('Yakin ingin membatalkan binding ini?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Unbind">
                                                            <i class="fas fa-unlink"></i>
                                                        </button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="7" class="text-center text-muted py-4">
                                                    <i class="fas fa-info-circle me-2"></i>
                                                    Belum ada binding yang dibuat
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection