@extends('root')
@section('title', 'Buat Custom Package')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Buat Custom Package',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.custom-packages.index'), 'label' => 'Custom Packages'],
        ],
        'current' => 'Buat'
    ])

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="ti ti-package me-2"></i>Detail Custom Package</h5>
                </div>
                <div class="card-body">
                    <form id="createForm">
                        <div class="mb-3">
                            <label class="form-label">Client <span class="text-danger">*</span></label>
                            <select name="client_id" class="form-select" required>
                                <option value="">Pilih Client</option>
                                @foreach($clients as $client)
                                    <option value="{{ $client->id }}">{{ $client->name }} ({{ $client->account_name }})</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="row">
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label class="form-label">Nama Paket <span class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control" required maxlength="100">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Type <span class="text-danger">*</span></label>
                                    <select name="type" id="type" class="form-select" required>
                                        <option value="dedicated">Dedicated</option>
                                        <option value="shared">Shared</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3" id="maxAgentsGroup">
                            <label class="form-label">Max Agents (hanya Dedicated) <span class="text-danger">*</span></label>
                            <input type="number" name="max_agents" class="form-control" min="1" value="2">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Deskripsi</label>
                            <textarea name="description" class="form-control" rows="3" placeholder="Opsional - catatan khusus untuk client ini"></textarea>
                        </div>

                        <hr>
                        <h6 class="mb-3">Harga & Durasi</h6>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Harga Bulanan (Rp) <span class="text-danger">*</span></label>
                                    <input type="number" name="price_monthly" class="form-control" min="0" value="0">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Harga Tahunan (Rp)</label>
                                    <input type="number" name="price_yearly" class="form-control" min="0" value="0">
                                    <small class="text-muted">Opsional, isi jika ada harga khusus tahunan.</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Durasi Custom (hari) <span class="text-danger">*</span></label>
                                    <input type="number" name="duration_days" class="form-control" min="1" value="30">
                                    <small class="text-muted">Dipakai jika billing_cycle = custom.</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Grace Period (hari) <span class="text-danger">*</span></label>
                                    <input type="number" name="grace_period_days" class="form-control" min="1" value="7">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label d-block">Auto Renew Default</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="autoRenewDefault" name="auto_renew_default" checked>
                                    <label class="form-check-label" for="autoRenewDefault">Aktif</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label d-block">Status</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="isActive" name="is_active" checked>
                                    <label class="form-check-label" for="isActive">Active</label>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 d-flex justify-content-between">
                            <a href="{{ route('admin.custom-packages.index') }}" class="btn btn-light">
                                <i class="ti ti-arrow-left me-1"></i> Kembali
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="ti ti-device-floppy me-1"></i> Simpan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card bg-light-info">
                <div class="card-body">
                    <h6 class="mb-2"><i class="ti ti-info-circle me-2"></i>Panduan Cepat</h6>
                    <ul class="small ps-3 mb-0">
                        <li>Pilih <strong>Client</strong> yang akan mendapatkan paket khusus.</li>
                        <li><strong>Type Dedicated</strong> akan membatasi jumlah agent sesuai <strong>Max Agents</strong>.</li>
                        <li><strong>Type Shared</strong> tidak membatasi agent (unlimited).</li>
                        <li><strong>Grace Period</strong> dipakai saat auto renewal gagal karena saldo kurang.</li>
                        <li>Penetapan paket ke client dilakukan dari halaman <strong>Custom Packages</strong> via tombol <em>Assign</em>.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    function toggleMaxAgents() {
        const type = $('#type').val();
        if (type === 'dedicated') {
            $('#maxAgentsGroup').show();
        } else {
            $('#maxAgentsGroup').hide();
        }
    }

    $('#type').on('change', toggleMaxAgents);
    toggleMaxAgents();

    $('#createForm').on('submit', function(e) {
        e.preventDefault();
        const btn = $(this).find('button[type="submit"]');
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');

        const formData = $(this).serialize();

        $.ajax({
            url: '{{ route('admin.custom-packages.store') }}',
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: formData,
            success: function(res) {
                toastr.success(res.meta?.message || 'Custom package berhasil dibuat');
                window.location.href = '{{ route('admin.custom-packages.index') }}';
            },
            error: function(xhr) {
                btn.prop('disabled', false).html('<i class="ti ti-device-floppy me-1"></i> Simpan');
                if (xhr.responseJSON?.errors) {
                    let messages = [];
                    Object.values(xhr.responseJSON.errors).forEach(function(errArr) {
                        messages = messages.concat(errArr);
                    });
                    toastr.error(messages.join('<br>'));
                } else {
                    toastr.error(xhr.responseJSON?.meta?.message || 'Gagal menyimpan custom package');
                }
            }
        });
    });
});
</script>
@endpush