@extends('admin.layouts.app')

@section('title', __('admin/billing.create_title'))

@section('content')
<div class="container-fluid px-4">
    <x-admin.page-header
        :title="__('admin/billing.create_title')"
        icon="fas fa-file-invoice"
        :buttons="[
            ['label' => __('admin/billing.buttons_back'), 'route' => route('admin.billing.index'), 'icon' => 'fas fa-arrow-left', 'color' => 'outline-secondary'],
        ]"
    />

    <x-admin.alert />

    
    <x-admin.card>
        <div class="row align-items-end">
            <div class="col-md-4">
                <div class="mb-3">
                    <label for="client_id" class="form-label">{{ __('admin/billing.fields_client') }} <span class="text-danger">*</span></label>
                    <select class="form-select" id="client_id" name="client_id" required>
                        <option value="">{{ __('admin/common.select') }}</option>
                        @foreach($clients as $client)
                            <option value="{{ $client->id }}" data-currency-id="{{ $client->currency_id ?? '' }}" @selected(request('client_id') == $client->id)>
                                {{ $client->name }} ({{ $client->email }})
                            </option>
                        @endforeach
                    </select>
                    @error('client_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="due_date" class="form-label">{{ __('admin/billing.fields_due_date') }} <span class="text-danger">*</span></label>
                    <input type="date" class="form-control" id="due_date" name="due_date"
                           value="{{ date('Y-m-d', strtotime('+30 days')) }}" required>
                           @error('due_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="currency_id" class="form-label">{{ __('admin/billing.fields_currency') }}</label>
                    <select class="form-select" id="currency_id" name="currency_id">
                        @foreach($currencies as $currency)
                            <option value="{{ $currency->id }}" @selected($currency->is_default)>
                                {{ $currency->code }} - {{ $currency->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="send_email" name="send_email" value="1" checked>
                        <label class="form-check-label" for="send_email">
                            <i class="fas fa-envelope me-1"></i>{{ __('admin/billing.send_email') }}
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </x-admin.card>

    
    <x-admin.card class="mt-3">
        <div class="d-flex align-items-center gap-4 mb-3">
            <div class="form-check">
                <input class="form-check-input" type="radio" name="invoice_source" id="source_scratch" value="scratch" checked>
                <label class="form-check-label fw-semibold" for="source_scratch">
                    <i class="fas fa-plus me-1"></i>{{ __('admin/billing.buttons_create') }}
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="invoice_source" id="source_order" value="order">
                <label class="form-check-label fw-semibold" for="source_order">
                    <i class="fas fa-shopping-cart me-1"></i>{{ __('admin/billing.buttons_create_from_order') }}
                </label>
            </div>
        </div>

        
        <div id="from-order-section" style="display: none;">
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="order_id" class="form-label">{{ __('admin/billing.buttons_create_from_order') }}</label>
                        <select class="form-select" id="order_id">
                            <option value="">{{ __('admin/common.select') }}</option>
                            @foreach($orders as $order)
                                <option value="{{ $order->id }}"
                                        data-total="{{ $order->total_amount }}"
                                        data-items="{{ $order->items->count() }}">
                                    Order #{{ $order->order_number }} - {{ $order->client->name ?? '' }}
                                    ({{ number_format($order->total_amount, 2) }} {{ $order->currency->code ?? 'TRY' }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin/billing.fields_total_amount') }}</label>
                        <div class="form-control-plaintext fw-bold" id="order-total">-</div>
                    </div>
                </div>
            </div>
            <div class="text-end">
                <button type="button" class="btn btn-primary" id="create-from-order">
                    <i class="fas fa-file-invoice me-1"></i>{{ __('admin/billing.buttons_create_from_order') }}
                </button>
            </div>
        </div>
    </x-admin.card>

    
    <div id="scratch-section">
        <form id="create-invoice-form">
            @csrf
            <x-admin.card class="mt-3" :padding="false">
                <div class="card-header border-0 d-flex justify-content-between align-items-center">
                    <h6 class="card-title mb-0"><i class="fas fa-list me-2"></i>{{ __('admin/billing.invoice_items_title') }}</h6>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-sm btn-outline-primary add-item-btn" data-source="product_catalog">
                            <i class="fas fa-server me-1"></i>{{ __('admin/billing.source_product_catalog') }}
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-info add-item-btn" data-source="tld_catalog">
                            <i class="fas fa-globe me-1"></i>{{ __('admin/billing.source_tld_catalog') }}
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-secondary add-item-btn" data-source="custom">
                            <i class="fas fa-pencil-alt me-1"></i>{{ __('admin/billing.source_custom_item') }}
                        </button>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-sm mb-0 align-top" id="invoice-items-table">
                        <thead>
                            <tr>
                                <th class="ps-3" style="width: 180px;">{{ __('admin/billing.select_source_type') }}</th>
                                <th style="width: 220px;">{{ __('admin/billing.invoice_items_description') }}</th>
                                <th style="width: 80px;">{{ __('admin/billing.invoice_items_quantity') }}</th>
                                <th style="width: 120px;">{{ __('admin/billing.invoice_items_unit_price') }}</th>
                                <th style="width: 100px;">{{ __('admin/billing.invoice_items_total_price') }}</th>
                                <th style="width: 50px;"></th>
                            </tr>
                        </thead>
                        <tbody id="invoice-items">
                            <!-- Items will be added via JS -->
                        </tbody>
                        <tfoot>
                            <tr class="border-top">
                                <td colspan="4" class="text-end fw-bold pe-3">{{ __('admin/billing.fields_subtotal') }}</td>
                                <td id="subtotal-display" class="fw-bold">0.00</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-end text-muted pe-3">{{ __('admin/billing.fields_tax') }}</td>
                                <td id="tax-display" class="text-muted">0.00</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-end fw-bold pe-3 fs-6">{{ __('admin/billing.fields_total_amount') }}</td>
                                <td id="total-display" class="fw-bold fs-6">0.00</td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </x-admin.card>

            
            <x-admin.card class="mt-3">
                <div class="mb-3">
                    <label for="notes" class="form-label">{{ __('admin/billing.fields_notes') }}</label>
                    <textarea class="form-control" id="notes" name="notes" rows="2"></textarea>
                </div>
            </x-admin.card>

            <div class="text-end mt-3">
                <a href="{{ route('admin.billing.index') }}" class="btn btn-outline-secondary me-2">
                    <i class="fas fa-times me-1"></i>{{ __('admin/common.cancel') }}
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-1"></i>{{ __('admin/billing.buttons_save') }}
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Item Row Template (hidden) -->
<template id="item-row-template">
    <tr class="invoice-item align-top" data-index="__INDEX__">
        <td>
            <select class="form-select form-select-sm source-type" name="items[__INDEX__][source_type]">
                <option value="">{{ __('admin/billing.select_source_type') }}</option>
                <option value="product_catalog">{{ __('admin/billing.source_product_catalog') }}</option>
                <option value="tld_catalog">{{ __('admin/billing.source_tld_catalog') }}</option>
                <option value="custom">{{ __('admin/billing.source_custom_item') }}</option>
            </select>
            <div class="source-options mt-1"></div>
        </td>
        <td>
            <input type="text" class="form-control form-control-sm item-description" name="items[__INDEX__][description]"
                   placeholder="{{ __('admin/billing.invoice_items_description') }}" required>
        </td>
        <td>
            <input type="number" class="form-control form-control-sm item-quantity" name="items[__INDEX__][quantity]"
                   value="1" min="0" step="1" required>
        </td>
        <td>
            <input type="number" class="form-control form-control-sm item-unit-price" name="items[__INDEX__][unit_price]"
                   step="0.01" min="0" placeholder="0.00" required>
        </td>
        <td class="item-line-total">0.00</td>
        <td>
            <button type="button" class="btn btn-outline-danger btn-sm remove-item">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    </tr>
</template>
@endsection

@push('scripts')
<script>
window.billingCreateConfig = {
    clientId: {{ request('client_id', 'null') }},
    routes: {
        store: '{{ route("admin.billing.store") }}',
        createFromOrder: '{{ route("admin.billing.create-from-order") }}',
        products: '{{ route("admin.billing.products") }}',
        productPricing: '{{ route("admin.billing.product-pricing", ":productId") }}',
        tlds: '{{ route("admin.billing.tlds") }}',
        tldPricing: '{{ route("admin.billing.tld-pricing", ":tldId") }}',
        calculateTax: '{{ route("api.admin.billing.calculate-tax") }}'
    },
    translations: {
        description: '{{ __("admin/billing.invoice_items_description") }}',
        minOneItem: '{{ __("admin/billing.errors_min_one_item") }}',
        createFailed: '{{ __("admin/billing.errors_create_failed") }}',
        selectOrder: '{{ __("admin/billing.errors_select_order") }}',
        orderCreateFailed: '{{ __("admin/billing.errors_order_create_failed") }}',
        confirmCreateFromOrder: '{{ __("admin/billing.confirmations_create_from_order") }}',
        selectSourceType: '{{ __("admin/billing.select_source_type") }}',
        selectProduct: '{{ __("admin/billing.select_product") }}',
        selectBillingCycle: '{{ __("admin/billing.select_billing_cycle") }}',
        selectTld: '{{ __("admin/billing.select_tld") }}',
        domainName: '{{ __("admin/billing.domain_name") }}',
        domainTypeRegister: '{{ __("admin/billing.domain_type_register") }}',
        domainTypeTransfer: '{{ __("admin/billing.domain_type_transfer") }}',
        domainTypeRenew: '{{ __("admin/billing.domain_type_renew") }}',
        domainYears: '{{ __("admin/billing.domain_years") }}',
        selectClient: '{{ __("admin/billing.fields_client") }}'
    }
};
</script>
@vite('resources/js/admin/billing/create.js')
@endpush