{{-- @include('scrumboard::livewire.show.task-card-right-description', ['task' => $task])    --}}

<div x-data="{ activeTab: 'period' }">
  
  <!-- Toggle Buttons -->
  <div class="d-flex gap-2 mb-4">
    <button
      class="btn btn-outline-secondary btn-sm"
      :class="{ 'active': activeTab === 'settings' }"
      @click="activeTab = 'settings'">
      <i class="fa fa-sliders-h me-1"></i> Settings
    </button>

    <button
      class="btn btn-outline-secondary btn-sm"
      :class="{ 'active': activeTab === 'period' }"
      @click="activeTab = 'period'">
      <i class="fa fa-calendar me-1"></i> Period
    </button>

    <button
      class="btn btn-outline-secondary btn-sm"
      :class="{ 'active': activeTab === 'reference' }"
      @click="activeTab = 'reference'">
      <i class="fa fa-list me-1"></i> Reference
    </button>

  </div>

                <div x-show="activeTab === 'period'" x-transition>
                
                    <div class="separator separator-dashed my-5"></div>                

                    {{-- Invoice Period --}}
                    <div class="mt-4 border-top pt-4">

                        <label class="form-label fw-bold">Period</label>

                        {{-- Start Period --}}
                        <div class="mb-4">
                            <label class="form-label fw-bold">Start Period</label>
                            @if($is_editable)
                                <input type="date" class="form-control form-control-sm" wire:model.defer="start_period">
                            @else
                                <div class="form-control-plaintext">{{ $start_period }}</div>
                            @endif
                        </div>

                        {{-- End Period --}}
                        <div class="mb-4">
                            <label class="form-label fw-bold">End Period</label>
                            @if($is_editable)
                                <input type="date" class="form-control form-control-sm" wire:model.defer="end_period">
                            @else
                                <div class="form-control-plaintext">{{ $end_period }}</div>
                            @endif
                        </div>

                        @if($is_editable)
                            <div class="d-flex justify-content-end">
                                <button class="btn btn-sm btn-primary me-2" wire:click="saveInvoiceSettings">
                                    Auto Fill
                                </button>
                                <button class="btn btn-sm btn-primary" wire:click="saveInvoiceSettings">
                                    Save Period
                                </button>
                            </div>
                        @endif

                    </div>
                    <div class="separator separator-dashed my-5"></div>
                    <p>Submission Date: {{ optional($task->projectable->submission_date)->format('Y-m-d') }}</p>

                    <!-- Submission Date -->
                    @if($task->projectable_type === \App\Models\Invoice::class)
                    <div class="mb-4">
                        <label class="form-label fw-bold">Submission Date</label>
                        
                        <div class="d-flex align-items-center gap-2">
                            <input type="date"
                                class="flatpickr form-control form-control-sm"
                                wire:model.defer="submission_date"
                                max="{{ now()->toDateString() }}">
                        
                            <button class="btn btn-sm btn-primary"
                                    wire:click="updateSubmissionDate">
                                Save
                            </button>
                        </div>
                    
                        @error('submission_date') 
                            <span class="text-danger d-block mt-1">{{ $message }}</span> 
                        @enderror
                    </div>
                    <div class="separator separator-dashed my-5"></div>

                    <!-- Claim Number -->
                    <div class="mb-4">
                        <label class="form-label fw-bold">Claim Number</label>
                    
                        <div class="d-flex align-items-center gap-2">
                            <input type="text"
                                class="form-control form-control-sm"
                                wire:model.defer="claim_number_input"
                                placeholder="Enter claim number">
                    
                            <button class="btn btn-sm btn-primary"
                                    wire:click="{{ $editing_claim_number_id ? 'updateClaimNumber' : 'storeClaimNumber' }}">
                                {{ $editing_claim_number_id ? 'Update' : 'Add' }}
                            </button>
                        </div>
                    
                        @error('claim_number_input') 
                            <span class="text-danger d-block mt-1">{{ $message }}</span> 
                        @enderror
                    </div>
                </div>

                <!-- Invoice Settings -->
                <div x-show="activeTab === 'settings'" x-transition>
                    <div class="separator separator-dashed my-5"></div>

                                        {{-- Invoice Period --}}
                                        <div class="mt-4 border-top pt-4">

                                            <h6 class="fw-bold mb-3">Setting</h6>
                    
                            {{-- Invoice Date --}}
                            <div class="mb-4">
                                <label class="form-label fw-bold">Invoice Date</label>
                                @if($is_editable)
                                <input type="date" class="form-control form-control-sm" wire:model.defer="invoice_date">
                                @else
                                <div class="form-control-plaintext">{{ $invoice_date }}</div>
                                @endif
                            </div>
                    
                            {{-- Received Date --}}
                            <div class="mb-4">
                                <label class="form-label fw-bold">Received Date</label>
                                @if($is_editable)
                                <input type="date" class="form-control form-control-sm" wire:model.defer="received_date">
                                @else
                                <div class="form-control-plaintext">{{ $received_date }}</div>
                                @endif
                            </div>
                    
                            {{-- Due Date --}}
                            <div class="mb-4">
                                <label class="form-label fw-bold">Due Date</label>
                                @if($is_editable)
                                <input type="date" class="form-control form-control-sm" wire:model.defer="due_date">
                                @else
                                <div class="form-control-plaintext">{{ $due_date }}</div>
                                @endif
                            </div>
                    
                            {{-- Invoice Number --}}
                            <div class="mb-4">
                                <label class="form-label fw-bold">Invoice Number</label>
                                @if($is_editable)
                                <input type="text" class="form-control form-control-sm" wire:model.defer="invoice_number">
                                @else
                                <div class="form-control-plaintext">{{ $invoice_number }}</div>
                                @endif
                            </div>
                    
                            {{-- Finance Handover Date --}}
                            <div class="mb-4">
                                <label class="form-label fw-bold">Finance Handover Date</label>
                                @if($is_editable)
                                <input type="date" class="form-control form-control-sm" wire:model.defer="finance_handover_date">
                                @else
                                <div class="form-control-plaintext">{{ $finance_handover_date }}</div>
                                @endif
                            </div>
                    
                            {{-- Deduction Type --}}
                            <div class="mb-4">
                                <label class="form-label fw-bold">Deduction Type</label>
                                @if($is_editable)
                                <select class="form-select form-select-sm" wire:model.defer="is_deduction_excluding_vat">
                                    <option value="1">Excluding VAT</option>
                                    <option value="0">Including VAT</option>
                                </select>
                                @else
                                <div class="form-control-plaintext">
                                    {{ $is_deduction_excluding_vat ? 'Excluding VAT' : 'Including VAT' }}
                                </div>
                                @endif
                            </div>
                    
                            {{-- Hide Currency Symbol --}}
                            <div class="mb-4 d-flex justify-content-between align-items-center">
                                <label class="form-label fw-bold">Hide Currency Symbol</label>
                                @if($is_editable)
                                <div class="form-check form-switch">
                                    <input type="checkbox" class="form-check-input" wire:model.defer="is_currency_hidden">
                                </div>
                                @else
                                <div class="form-control-plaintext">{{ $is_currency_hidden ? 'Yes' : 'No' }}</div>
                                @endif
                            </div>
                    
                            {{-- Round Total --}}
                            <div class="mb-4 d-flex justify-content-between align-items-center">
                                <label class="form-label fw-bold mb-0">Round Total</label>
                            
                                @if($is_editable)
                                    <div class="form-check form-switch mb-0">
                                        <input type="checkbox" class="form-check-input" wire:model.defer="rounding_amount">
                                    </div>
                                @else
                                    <div class="form-control-plaintext mb-0">{{ $rounding_amount ? 'Yes' : 'No' }}</div>
                                @endif
                            </div>
                            
                    
                            {{-- Save Button --}}
                            @if($is_editable)
                                <div class="d-flex justify-content-end mt-4">
                                <button class="btn btn-sm btn-primary" wire:click="saveInvoiceSettings">
                                    Save Settings
                                </button>
                                </div>
                            @endif
                    
                            </div>
                </div>
                
                <!-- Reference Number -->                
                <div x-show="activeTab === 'reference'" x-transition>
                  <div class="separator separator-dashed my-5"></div>

                    <div class="mb-4">
                        <label class="form-label fw-bold">Reference Number</label>
                    
                        <div class="d-flex align-items-center gap-2">
                            <input type="text"
                                class="form-control form-control-sm"
                                wire:model.defer="reference_no_input"
                                placeholder="Enter reference number">
                    
                            <button class="btn btn-sm btn-primary"
                                    wire:click="{{ $editing_reference_no_id ? 'updateReferenceNumber' : 'storeReferenceNumber' }}">
                                {{ $editing_reference_no_id ? 'Update' : 'Add' }}
                            </button>
                        </div>
                    
                        @error('reference_no_input') 
                            <span class="text-danger d-block mt-1">{{ $message }}</span> 
                        @enderror
                    </div>
                    
                    @if($invoice->reference_nos->count())
                        <div class="mb-4">
                            <label class="form-label fw-bold">Existing Reference Numbers</label>
                    
                            <ul class="list-group">
                                @foreach($invoice->reference_nos as $ref)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <span>{{ $ref->reference_no }}</span>
                                        <div class="d-flex gap-1">
                                            <button class="btn btn-sm btn-outline-primary" wire:click="editReferenceNumber({{ $ref->id }})">
                                                Edit
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger" wire:click="destroyReferenceNumber({{ $ref->id }})">
                                                Delete
                                            </button>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
                
              @endif