@php
    $action = $mode === 'edit'
        ? route('zits-proforma-invoices.update', $invoice->id)
        : route('zits-proforma-invoices.store');
    $selectedTechnologies = old('technologies', isset($invoice) ? json_decode($invoice->technologies ?? '[]', true) : []);
    if (!is_array($selectedTechnologies)) {
        $selectedTechnologies = [];
    }
@endphp

<form method="POST" action="{{ $action }}" class="invoice-form zits-form"
    data-modules-url-template="{{ url('/zits-proforma/get-client-modules/__CLIENT__') }}"
    data-available-modules='@json(isset($modules) ? $modules->values() : [])'>
    @csrf
    @if($mode === 'edit')
        @method('PUT')
    @endif

    <div class="zits-form-shell">
        <div class="zits-form-card">
            <div class="zits-form-card__header">
                <div>
                    <h6 class="mb-1">{{ $mode === 'edit' ? 'Edit Invoice Details' : 'Create Invoice Details' }}</h6>
                    <p class="text-muted mb-0">Choose client, date, status, modules, resources, and technologies.</p>
                </div>
            </div>

            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Invoice Number</label>
                    @php
                        $defaultInvoiceNo = $mode === 'create'
                            ? 'ZP-INV-' . now()->format('dmY-His')
                            : ($invoice->invoice_number ?? '');
                    @endphp
                    <input type="text" name="invoice_number" class="form-control"
                        value="{{ $mode === 'edit' ? old('invoice_number', $invoice->invoice_number) : $defaultInvoiceNo }}"
                        readonly required>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Invoice Date</label>
                    <input type="date" name="date" class="form-control"
                        value="{{ old('date', $mode === 'edit' ? (\Carbon\Carbon::parse($invoice->date)->format('Y-m-d')) : now()->toDateString()) }}"
                        required>
                </div>

                <div class="col-md-7">
                    <label class="form-label" for="client_id_{{ $mode }}_{{ $invoice->id ?? 'new' }}">Client</label>
                    @if($mode === 'edit')
                        <input type="text" class="form-control" value="{{ $invoice->client->name ?? '' }}" readonly>
                        <input type="hidden" name="client_id" value="{{ $invoice->client_id }}">
                    @else
                        @php
                            $selectedClient = $clients->firstWhere('id', old('client_id'));
                        @endphp
                        <div class="zits-client-combobox">
                            <input type="text"
                                class="form-control client-search-input"
                                value="{{ $selectedClient->name ?? '' }}"
                                placeholder="Search and choose client"
                                autocomplete="off">
                            <input id="client_id_{{ $mode }}_{{ $invoice->id ?? 'new' }}"
                                type="hidden"
                                name="client_id"
                                class="client-select"
                                value="{{ old('client_id') }}"
                                required>
                            <div class="zits-client-options d-none">
                                @foreach ($clients as $client)
                                    <button type="button"
                                        class="zits-client-option"
                                        data-client-id="{{ $client->id }}"
                                        data-client-name="{{ $client->name }}">
                                        {{ $client->name }}
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    @endif
                    <small class="text-muted module-loading d-none mt-1 d-inline-block">Loading modules for selected client...</small>
                </div>

                <div class="col-md-5">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select">
                        @foreach(['draft', 'sent', 'approved', 'cancelled'] as $status)
                            <option value="{{ $status }}" {{ old('status', $invoice->status ?? 'draft') === $status ? 'selected' : '' }}>
                                {{ ucfirst($status) }}
                            </option>
                        @endforeach
                    </select>
                </div>

           
            </div>
        </div>

        <div class="zits-form-card">
            <div class="zits-form-card__header zits-form-card__header--space">
                <div>
                    <h6 class="mb-1">Invoice Items</h6>
                    <p class="text-muted mb-0">Modules load after client selection. You can also add custom items.</p>
                </div>
                <div class="d-flex flex-wrap gap-2">
                    <button type="button" class="btn btn-primary btn-sm add-item-btn">
                        <i class="mdi mdi-plus-circle-outline me-1"></i>Add Module
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm add-other-item-btn">
                        <i class="mdi mdi-plus-box-outline me-1"></i>Add Custom Item
                    </button>
                </div>
            </div>

            <div class="items-wrapper">
                <div class="items-container">
                    @if($mode === 'edit' && isset($invoice->items))
                        @foreach($invoice->items as $index => $item)
                            <div class="item-row zits-line-item" data-index="{{ $index }}">
                                <div class="row g-3 align-items-end">
                                    @if($item->module_id)
                                        <div class="col-lg-8 col-md-7">
                                            <label class="form-label">Module</label>
                                            @php
                                                $clientModules = $modules->filter(function ($module) use ($invoice, $item) {
                                                    return $module->id == $item->module_id ||
                                                        ($module->activity && $module->activity->client == $invoice->client_id);
                                                });
                                            @endphp
                                            <select name="items[{{ $index }}][module_id]" class="form-select module-select" required>
                                                <option value="">Select module</option>
                                                @foreach($clientModules as $module)
                                                    <option value="{{ $module->id }}" title="{{ $module->name }}" {{ old("items.$index.module_id", $item->module_id) == $module->id ? 'selected' : '' }}>
                                                        {{ $module->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <input type="hidden" name="items[{{ $index }}][type]" value="module">
                                        </div>
                                    @else
                                        <div class="col-lg-8 col-md-7">
                                            <label class="form-label">Custom Item</label>
                                            <input type="text" name="items[{{ $index }}][title]" class="form-control"
                                                value="{{ old("items.$index.title", $item->description) }}" required>
                                            <input type="hidden" name="items[{{ $index }}][type]" value="other">
                                        </div>
                                    @endif

                                    <div class="col-lg-2 col-md-3">
                                        <label class="form-label">Price</label>
                                        <input type="number" step="0.01" min="0" name="items[{{ $index }}][price]" class="form-control"
                                            value="{{ old("items.$index.price", $item->rate) }}" required>
                                    </div>

                                    <div class="col-lg-2 col-md-2">
                                        <button type="button" class="btn btn-outline-danger w-100 remove-item">Remove</button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>

                <div class="items-empty-state {{ $mode === 'edit' && isset($invoice->items) && $invoice->items->count() ? 'd-none' : '' }}">
                    <i class="mdi mdi-shape-plus"></i>
                    <span>Select a client to load modules, or add a custom item.</span>
                </div>
            </div>
        </div>

        <div class="zits-form-card">
            <div class="zits-form-card__header zits-form-card__header--space">
                <div>
                    <h6 class="mb-1">Resources Involved</h6>
                    <p class="text-muted mb-0">Add designation and count for the team involved in this invoice.</p>
                </div>
                <button type="button" class="btn btn-outline-success btn-sm add-designation">
                    <i class="mdi mdi-account-plus-outline me-1"></i>Add Resource
                </button>
            </div>

            <div class="designation-wrapper">
                <div class="designation-container">
                    @if($mode === 'edit' && isset($invoice->designations))
                        @foreach($invoice->designations as $index => $designation)
                            <div class="designation-row zits-line-item zits-line-item--soft">
                                <div class="row g-3 align-items-end">
                                    <div class="col-md-7">
                                        <label class="form-label">Designation</label>
                                        <input type="text" name="designations[{{ $index }}][designation]" class="form-control"
                                            value="{{ old("designations.$index.designation", $designation->name) }}" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Count</label>
                                        <input type="number" min="1" name="designations[{{ $index }}][count]" class="form-control"
                                            value="{{ old("designations.$index.count", $designation->pivot->count ?? 1) }}" required>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-outline-danger w-100 remove-designation">Remove</button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>

        <div class="zits-form-card">
             <div class="col-12">
                    <label class="form-label">Technologies</label>
                    <div class="zits-technology-list">
                        @foreach ($technologies as $technology)
                            @php
                                $technologyInputId = 'technology_' . $mode . '_' . ($invoice->id ?? 'new') . '_' . $technology->id;
                            @endphp
                            <div class="form-check">
                                <input class="form-check-input"
                                    type="checkbox"
                                    name="technologies[]"
                                    value="{{ $technology->id }}"
                                    id="{{ $technologyInputId }}"
                                    {{ in_array($technology->id, $selectedTechnologies) ? 'checked' : '' }}>
                                <label class="form-check-label" for="{{ $technologyInputId }}">
                                    {{ $technology->technology }}
                                </label>
                            </div>
                        @endforeach
                    </div>
            </div>
        </div>

        <div class="zits-form-card">
            <label class="form-label">Remarks</label>
            <textarea name="remarks" class="form-control" rows="4" placeholder="Add internal note or invoice remark">{{ $mode === 'edit' ? old('remarks', $invoice->remarks ?? '') : '' }}</textarea>
        </div>

        <div class="zits-form-actions">
            <button type="button" class="btn btn-light px-4" data-bs-dismiss="offcanvas">Cancel</button>
            <button type="submit" class="btn btn-success px-4">
                <i class="mdi mdi-content-save-outline me-1"></i>Save ZITS Proforma
            </button>
        </div>
    </div>
</form>