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

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

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="ti ti-package me-2"></i>Edit Custom Package</h5>
                    <span class="badge bg-secondary">ID: {{ $package->id }}</span>
                </div>
                <div class="card-body">
                    <form id="editForm">
                        <div class="mb-3">
                            <label class="form-label">Client <span class="text-danger">*</span></label>
                            <select name="client_id" class="form-select" required>
                                @foreach($clients as $client)
                                    <option value="{{ $client->id }}" {{ $package->client_id == $client->id ? 'selected' : '' }}>
                                        {{ $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"
                                           value="{{ $package->name }}">
                                </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" {{ $package->type === 'dedicated' ? 'selected' : '' }}>Dedicated</option>
                                        <option value="shared" {{ $package->type === 'shared' ? 'selected' : '' }}>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="{{ $package->max_agents ?? 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">{{ $package->description }}</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="{{ $package->price_monthly }}">
                                </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="{{ $package->price_yearly }}">
                                    <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="{{ $package->duration_days }}">
                                    <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="{{ $package->grace_period_days }}">
                                </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"
                                           {{ $package->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"
                                           {{ $package->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 Perubahan
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card bg-light-warning">
                <div class="card-body">
                    <h6 class="mb-2"><i class="ti ti-alert-circle me-2"></i>Dampak Perubahan</h6>
                    <ul class="small ps-3 mb-0">
                        <li>Perubahan harga tidak akan mengubah transaksi yang sudah terjadi (hanya berlaku untuk aktivasi/renewal berikutnya).</li>
                        <li>Perubahan <strong>max agents</strong> akan mempengaruhi limit agent untuk client ini ketika paket custom aktif.</li>
                        <li>Jika status di-set <strong>Disabled</strong>, paket ini tidak bisa di-assign lagi, namun histori tetap tersimpan.</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();

    $('#editForm').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.update', $package->id) }}',
            type: 'PUT',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: formData,
            success: function(res) {
                toastr.success(res.meta?.message || 'Custom package berhasil diperbarui');
                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 Perubahan');
                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 memperbarui custom package');
                }
            }
        });
    });
});
</script>
@endpush