@extends('root')
@section('title', 'Buat Pengajuan Nomor WhatsApp Dedicated')

@push('styles')
<style>
    .form-section {
        background: #fff;
        border-radius: 0.75rem;
        border: 1px solid rgba(0,0,0,0.06);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .form-section-title {
        font-size: 0.875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #6c757d;
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #f1f3f4;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .form-section-title i { color: #0d6efd; font-size: 1rem; }
    .use-case-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.75rem;
    }
    .use-case-item {
        border: 2px solid #e9ecef;
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .use-case-item:hover { border-color: #0d6efd; background: #f0f4ff; }
    .use-case-item input[type="checkbox"]:checked + label { color: #0d6efd; }
    .use-case-item:has(input:checked) {
        border-color: #0d6efd;
        background: #f0f4ff;
    }
    .cost-banner {
        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
        border: 1px solid #ffc107;
        border-radius: 0.75rem;
        padding: 1rem 1.25rem;
    }
    .required-star { color: #dc3545; }
</style>
@endpush

@section('content')
<div class="container-fluid">

    @include('components.breadcrumb', [
        'title' => 'Buat Pengajuan',
        'links' => [
            ['url' => route('client.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('client.wa-submission.index'), 'label' => 'Pengajuan Nomor Dedicated'],
        ],
        'current' => 'Buat Pengajuan Baru'
    ])

    {{-- Cost Banner --}}
    <div class="cost-banner mb-4 d-flex align-items-center gap-3">
        <i class="ti ti-coin fs-3 text-warning"></i>
        <div>
            <div class="fw-semibold text-dark">Biaya Setup</div>
            <p class="mb-0 text-dark" style="font-size:0.875rem;">
                Saat pengajuan Anda <strong>disetujui</strong>, sistem akan memotong saldo sebesar
                <strong class="text-warning fs-5">Rp {{ number_format($setupFee, 0, ',', '.') }}</strong> sebagai biaya setup nomor WhatsApp Business Dedicated.
            </p>
        </div>
    </div>

    <form method="POST" action="{{ route('client.wa-submission.store') }}" id="formSubmit">
        @csrf

        {{-- ═══════════════════════════════════════════════════════════ --}}
        {{-- SECTION 1: Informasi Perusahaan --}}
        {{-- ═══════════════════════════════════════════════════════════ --}}
        <div class="form-section">
            <div class="form-section-title">
                <i class="ti ti-building"></i> Informasi Perusahaan
            </div>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        Nama Perusahaan <span class="required-star">*</span>
                    </label>
                    <input type="text" name="company_name" class="form-control @error('company_name') is-invalid @enderror"
                           value="{{ old('company_name') }}" placeholder="PT. Contoh Sejahtera"
                           required maxlength="255">
                    @error('company_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">Website Bisnis</label>
                    <input type="url" name="website" class="form-control @error('website') is-invalid @enderror"
                           value="{{ old('website') }}" placeholder="https://www.perusahaan.com">
                    @error('website')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        Kategori Bisnis <span class="required-star">*</span>
                    </label>
                    <select name="business_category" class="form-select @error('business_category') is-invalid @enderror" required>
                        <option value="">-- Pilih Kategori --</option>
                        @foreach([
                            'Automotive' => 'Automotive',
                            'Beauty, Spa and Salon' => 'Beauty, Spa and Salon',
                            'Clothing and Apparel' => 'Clothing and Apparel',
                            'Education' => 'Education',
                            'Entertainment' => 'Entertainment',
                            'Event Planning and Service' => 'Event Planning and Service',
                            'Finance and Banking' => 'Finance and Banking',
                            'Food and Grocery' => 'Food and Grocery',
                            'Public Service' => 'Public Service',
                            'Hotel and Lodging' => 'Hotel and Lodging',
                            'Medical and Health' => 'Medical and Health',
                            'Non-profit' => 'Non-profit',
                            'Professional Services' => 'Professional Services',
                            'Shopping and Retail' => 'Shopping and Retail',
                            'Travel and Transportation' => 'Travel and Transportation',
                            'Restaurant' => 'Restaurant',
                            'Technology' => 'Technology',
                            'Other' => 'Lainnya',
                        ] as $value => $label)
                            <option value="{{ $value }}" {{ old('business_category') === $value ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                    @error('business_category')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        Negara <span class="required-star">*</span>
                    </label>
                    <input type="text" name="country" class="form-control @error('country') is-invalid @enderror"
                           value="{{ old('country', 'Indonesia') }}" placeholder="Indonesia" required maxlength="100">
                    @error('country')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-12">
                    <label class="form-label fw-semibold">
                        Deskripsi Bisnis <span class="required-star">*</span>
                    </label>
                    <textarea name="business_description" rows="3"
                              class="form-control @error('business_description') is-invalid @enderror"
                              placeholder="Jelaskan secara singkat tentang bisnis Anda, produk/layanan yang ditawarkan, dan target pelanggan..."
                              required maxlength="1000">{{ old('business_description') }}</textarea>
                    <div class="form-text">Maks. 1000 karakter</div>
                    @error('business_description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        {{-- ═══════════════════════════════════════════════════════════ --}}
        {{-- SECTION 2: Informasi Nomor WhatsApp --}}
        {{-- ═══════════════════════════════════════════════════════════ --}}
        <div class="form-section">
            <div class="form-section-title">
                <i class="ti ti-brand-whatsapp"></i> Informasi Nomor WhatsApp
            </div>
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label fw-semibold">
                        Kode Negara <span class="required-star">*</span>
                    </label>
                    <div class="input-group">
                        <span class="input-group-text">+</span>
                        <input type="text" name="country_code"
                               class="form-control @error('country_code') is-invalid @enderror"
                               value="{{ old('country_code', '62') }}"
                               placeholder="62" maxlength="10" required
                               pattern="[0-9]{1,10}">
                    </div>
                    @error('country_code')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-5">
                    <label class="form-label fw-semibold">
                        Nomor WhatsApp <span class="required-star">*</span>
                    </label>
                    <input type="text" name="whatsapp_number"
                           class="form-control @error('whatsapp_number') is-invalid @enderror"
                           value="{{ old('whatsapp_number') }}"
                           placeholder="81234567890" maxlength="20" required>
                    <div class="form-text">
                        <i class="ti ti-info-circle me-1"></i>
                        Masukkan nomor tanpa tanda + dan tanpa awalan 0. Contoh: 81234567890
                    </div>
                    @error('whatsapp_number')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">Provider / Operator</label>
                    <input type="text" name="provider"
                           class="form-control @error('provider') is-invalid @enderror"
                           value="{{ old('provider') }}"
                           placeholder="Telkomsel, Indosat, XL, dll." maxlength="100">
                    @error('provider')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        Metode Verifikasi <span class="required-star">*</span>
                    </label>
                    <div class="d-flex gap-3 mt-1">
                        @foreach($verificationMethods as $method)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="verification_method"
                                   id="vm_{{ $method }}" value="{{ $method }}"
                                   {{ old('verification_method', 'SMS') === $method ? 'checked' : '' }} required>
                            <label class="form-check-label fw-semibold" for="vm_{{ $method }}">
                                @if($method === 'SMS')
                                    <i class="ti ti-message me-1 text-primary"></i> SMS
                                @else
                                    <i class="ti ti-phone me-1 text-success"></i> Voice Call
                                @endif
                            </label>
                        </div>
                        @endforeach
                    </div>
                    @error('verification_method')
                        <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        {{-- ═══════════════════════════════════════════════════════════ --}}
        {{-- SECTION 3: Display Name --}}
        {{-- ═══════════════════════════════════════════════════════════ --}}
        <div class="form-section">
            <div class="form-section-title">
                <i class="ti ti-id-badge"></i> Display Name
            </div>
            <div class="row g-3">
                <div class="col-md-7">
                    <label class="form-label fw-semibold">
                        WhatsApp Display Name <span class="required-star">*</span>
                    </label>
                    <input type="text" name="display_name"
                           class="form-control @error('display_name') is-invalid @enderror"
                           value="{{ old('display_name') }}"
                           placeholder="Nama yang tampil di WhatsApp (maks. 100 karakter)"
                           required maxlength="100">
                    <div class="form-text">
                        Nama ini akan tampil sebagai nama bisnis di WhatsApp. Harus sesuai dengan nama bisnis resmi Anda.
                    </div>
                    @error('display_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-5">
                    <label class="form-label fw-semibold">
                        Bahasa Display <span class="required-star">*</span>
                    </label>
                    <select name="display_language" class="form-select @error('display_language') is-invalid @enderror" required>
                        <option value="id" {{ old('display_language', 'id') === 'id' ? 'selected' : '' }}>Bahasa Indonesia</option>
                        <option value="en" {{ old('display_language') === 'en' ? 'selected' : '' }}>English</option>
                        <option value="ms" {{ old('display_language') === 'ms' ? 'selected' : '' }}>Bahasa Melayu</option>
                        <option value="zh" {{ old('display_language') === 'zh' ? 'selected' : '' }}>中文 (Chinese)</option>
                        <option value="ar" {{ old('display_language') === 'ar' ? 'selected' : '' }}>العربية (Arabic)</option>
                    </select>
                    @error('display_language')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        {{-- ═══════════════════════════════════════════════════════════ --}}
        {{-- SECTION 4: Use Case --}}
        {{-- ═══════════════════════════════════════════════════════════ --}}
        <div class="form-section">
            <div class="form-section-title">
                <i class="ti ti-list-check"></i> Use Case / Tujuan Penggunaan
            </div>

            <label class="form-label fw-semibold mb-3">
                Pilih Tujuan Penggunaan <span class="required-star">*</span>
                <small class="text-muted fw-normal">(pilih satu atau lebih)</small>
            </label>

            <div class="use-case-grid mb-3">
                @foreach($useCases as $key => $label)
                @php
                    $oldUseCases = old('use_case', []);
                    $isChecked = in_array($key, $oldUseCases);
                    $icons = [
                        'customer_support'     => 'ti-headset',
                        'order_notification'   => 'ti-shopping-cart',
                        'appointment_reminder' => 'ti-calendar',
                        'payment_notification' => 'ti-credit-card',
                        'marketing'            => 'ti-speakerphone',
                    ];
                @endphp
                <label class="use-case-item" for="uc_{{ $key }}">
                    <input type="checkbox" name="use_case[]" id="uc_{{ $key }}" value="{{ $key }}"
                           class="form-check-input me-2" {{ $isChecked ? 'checked' : '' }}>
                    <i class="ti {{ $icons[$key] ?? 'ti-check' }} text-primary"></i>
                    <span class="fw-semibold" style="font-size:0.875rem;">{{ $label }}</span>
                </label>
                @endforeach
            </div>

            @error('use_case')
                <div class="text-danger small mb-3">{{ $message }}</div>
            @enderror

            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label fw-semibold">Deskripsi Penggunaan</label>
                    <textarea name="use_case_description" rows="3"
                              class="form-control @error('use_case_description') is-invalid @enderror"
                              placeholder="Jelaskan lebih lanjut bagaimana Anda akan menggunakan WhatsApp Business API..."
                              maxlength="1000">{{ old('use_case_description') }}</textarea>
                    @error('use_case_description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-12">
                    <label class="form-label fw-semibold">Contoh Pesan</label>
                    <textarea name="example_message" rows="2"
                              class="form-control @error('example_message') is-invalid @enderror"
                              placeholder="Contoh: Halo {{1}}, pesanan Anda #{{2}} telah dikonfirmasi dan akan segera dikirim."
                              maxlength="500">{{ old('example_message') }}</textarea>
                    <div class="form-text">Berikan contoh pesan yang akan Anda kirimkan ke pelanggan.</div>
                    @error('example_message')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        {{-- Submit Buttons --}}
        <div class="d-flex gap-3 justify-content-end mb-5">
            <a href="{{ route('client.wa-submission.index') }}" class="btn btn-outline-secondary btn-lg px-4">
                <i class="ti ti-arrow-left me-1"></i> Batal
            </a>
            <button type="submit" class="btn btn-success btn-lg px-5 fw-semibold" id="btnSubmit">
                <i class="ti ti-send me-1"></i> Kirim Pengajuan
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('formSubmit').addEventListener('submit', function(e) {
    const checkboxes = document.querySelectorAll('input[name="use_case[]"]:checked');
    if (checkboxes.length === 0) {
        e.preventDefault();
        Swal.fire({
            icon: 'warning',
            title: 'Use Case Belum Dipilih',
            text: 'Harap pilih minimal satu tujuan penggunaan.',
        });
        return;
    }

    const btn = document.getElementById('btnSubmit');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Mengirim...';
});
</script>
@endpush