@php
    $action = $mode == 'edit' ? route('service-invoices.update', $invoice->id) : route('service-invoices.store');
    $method = $mode == 'edit' ? 'PUT' : 'POST';
@endphp

<form method="POST" action="{{ $action }}" class="invoice-form">
    @csrf
    @if($mode === 'edit') @method('PUT') @endif

{{--     <div class="mb-2">
        <label>Invoice Number</label>
        @php
            $defaultInvoiceNo = $mode === 'create' ? 'INV-' . time() : ($invoice->invoice_number ?? '');
        @endphp
        <input type="text" name="invoice_number" class="form-control"
            value="{{ $mode === 'edit' ? old('invoice_number', $invoice->invoice_number) : $defaultInvoiceNo }}"
            required>
    </div> --}}
    <div class="mb-2">
        <label>Invoice Number</label>
        @php
            $defaultInvoiceNo = $mode === 'create'
                ? 'S-INV-' . now()->format('dmY-His') // Format: ddmmyyyy-HHMMSS
                : ($invoice->invoice_number ?? '');
        @endphp
        <input type="text" name="invoice_number" class="form-control"
            value="{{ $mode === 'edit' ? old('invoice_number', $invoice->invoice_number) : $defaultInvoiceNo }}"
            required readonly>
    </div>
    
    


    <div class="mb-2">
        <label>Date</label>
        <input type="date" name="date" class="form-control"
               value="{{ old('date', $invoice->date ?? now()->toDateString()) }}" required>
    </div>

    {{-- Client Dropdown --}}
    <div class="mb-3">
        <label for="client_id">Client:</label>
        <select id="client_id" name="client_id" class="form-control client-select" required>
            <option value="">-- Select Client --</option>
            @foreach ($clients as $client)
                <option value="{{ $client->id }}"
                    {{ old('client_id', $invoice->client_id ?? '') == $client->id ? 'selected' : '' }}>
                    {{ $client->name }}
                </option>
            @endforeach
        </select>
        <small class="text-muted module-loading" style="display: none;">Loading modules...</small>
    </div>

    {{-- Items --}}
    <div class="items-wrapper mb-3">
        <label>Invoice Items</label>
        <div class="mt-4 items-container">
            @if($mode === 'edit' && isset($invoice->items))
            @foreach($invoice->items as $index => $item)
            <div class="item-row border p-3 mb-2 rounded bg-light" data-index="{{ $index }}">
                <div class="row g-2 align-items-end">
                    @if($item->module_id)
                        {{-- Module-based Item --}}
                        <div class="col-md-4">
                            <label>Module</label>
                              @php
    $clientModules = $modules->filter(function ($module) use ($invoice) {
        return $module->activity && $module->activity->client == $invoice->client_id;
    });
@endphp


<select name="items[{{ $index }}][module_id]" class="form-control">
    <option value="">-- Select Module --</option>
    @foreach($clientModules as $module)
        <option value="{{ $module->id }}"
            {{ old("items.$index.module_id", $item->module_id) == $module->id ? 'selected' : '' }}>
            {{ $module->name }}
        </option>
    @endforeach
</select>
                            {{-- <select name="items[{{ $index }}][module_id]" class="form-control">
                                <option value="">-- Select Module --</option>
                                @foreach($modules as $module)
                                    <option value="{{ $module->id }}"
                                        {{ old("items.$index.module_id", $item->module_id) == $module->id ? 'selected' : '' }}>
                                        {{ $module->name }}
                                    </option>
                                @endforeach
                            </select> --}}
                        </div>
                        <input type="hidden" name="items[{{ $index }}][type]" value="module">
                    @else
                        {{-- Other Item --}}
                        <div class="col-md-4">
                            <label>Other Title</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-md-3">
                        <label>Price</label>
                        <input type="number" name="items[{{ $index }}][price]" class="form-control"
                               value="{{ old("items.$index.price", $item->rate) }}">
                    </div>
        
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="button" class="btn btn-danger remove-item w-100">Remove</button>
                    </div>
                </div>
            </div>
        @endforeach
        @foreach($invoice->designations as $index => $designation)
        <div class="row g-2 mb-2 designation-row">
            <div class="col-md-6">
                <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-4">
                <label>Count</label>
                <input type="number" name="designations[{{ $index }}][count]" class="form-control"
                       value="{{ old("designations.$index.count", $designation->pivot->count ?? 1) }}" required>
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button type="button" class="btn btn-danger remove-designation w-100">Remove</button>
            </div>
        </div>
    @endforeach
            @endif
        </div>

        
    </div>
    <div class="designation-wrapper">
       
        <div class="designation-container">
          <!-- Dynamic designations will be appended here -->
        </div>
        
      </div>
      @if($mode === 'create')
            <button type="button" class="btn btn-primary mt-2 add-item-btn">Add Item</button>
            <button type="button" class="btn btn-outline-secondary add-other-item-btn">+ Add Other Item</button>
            <button type="button" class="btn btn-outline-success add-designation">Add Resources</button>
        @endif
    
    
        <div class="mb-2">
            <label for="technologies" class="form-label">Technologies</label>
            <select class="selectpicker form-select" multiple aria-label="Default select example"
                    data-live-search="true" id="technologies[]" name="technologies[]">
                @php
                    // Use the old input value for the selected technologies or fallback to the $invoice->technologies if available
                    $selectedTechnologies = old('technologies', json_decode($invoice->technologies ?? '[]', true));
                    if (!is_array($selectedTechnologies)) {
                        $selectedTechnologies = [];
                    }
                @endphp
    
                @foreach ($technologies as $technology)
                    <option value="{{ $technology->id }}"
                            {{ in_array($technology->id, $selectedTechnologies) ? 'selected' : '' }}>
                        {{ $technology->technology }}
                    </option>
                @endforeach
            </select>
        </div>

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

    <div class="mb-2">
        <label>Remarks</label>
        <textarea name="remarks" class="form-control">{{ old('remarks', $invoice->remarks ?? '') }}</textarea>
    </div>

    <button class="btn btn-success">Save</button>
</form>