@if ($errors->any())
    <div class="row">
        <div class="col-md-12">
            <div class="mb-3">
                <div class="alert alert-primary" role="alert">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endif

<div class="row">
    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label">Invoice Number <span class="text-danger">*</span></label>
        <input type="text" wire:model="form.invoice_number" class="form-control">
    </div>

    {{-- <div class="col-12 col-md-6 mb-3">
            <label class="col-form-label">Account <span class="text-danger">*</span></label>
            <select id="account_id" wire:model.change="form.account_id" class="form-select">
                <option value="" selected disabled hidden>Select Account</option>
                @foreach ($accounts as $account)
                    <option value="{{ $account->id }}">{{ $account->name }}</option>
                @endforeach
            </select>
            @error('form.account_id')
                <div class="error text-danger mt-1">{{ $message }}</div>
            @enderror
    </div> --}}

    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label">Invoice From <span class="text-danger">*</span></label>
        <select id="invoice_from" wire:model.change="form.invoice_from" class="form-select">
            <option value="" selected disabled hidden>Select Invoice From</option>
            @foreach ($contacts as $contact)
                <option value="{{ $contact->id }}">{{ $contact->name }}</option>
            @endforeach
        </select>
        @error('form.invoice_from')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label">Invoice To <span class="text-danger">*</span></label>
        <select id="invoice_to" wire:model.change="form.invoice_to" class="form-select">
            <option value="" selected disabled hidden>Select Invoice To</option>
            @foreach ($contacts as $contact)
                <option value="{{ $contact->id }}">{{ $contact->name }}</option>
            @endforeach
        </select>
        @error('form.invoice_to')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label">Timesheet</label>
        <select id="timesheet_id" wire:model.change="form.timesheet_id" class="form-select">
            <option value="" selected disabled hidden>Select Timesheet</option>
            @foreach ($timesheets as $timesheet)
                <option value="{{ $timesheet->id }}">{{ $timesheet->duration }} - {{ $timesheet->description }}</option>
            @endforeach
        </select>
        @error('form.timesheet_id')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label for="type" class="col-form-label">Type <span class="text-danger">*</span></label>
        <select id="type" wire:model.change="form.type" class="form-select">
            <option value="" selected disabled hidden>Select type</option>
            @foreach ($types as $type)
                <option value="{{ $type }}">{{ Str::of($type)->replace('_',' ')->title() }}</option>
            @endforeach
        </select>
        @error('form.type')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label for="status" class="col-form-label">Status <span class="text-danger">*</span></label>
        <select id="status" wire:model.change="form.status" class="form-select">
            <option value="" selected disabled hidden>Select Status</option>
            @foreach ($statuses as $status)
                <option value="{{ $status->status }}">{{ Str::of($status->status)->replace('_',' ')->title() }}</option>
            @endforeach
        </select>
        @error('form.status')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label class="col-form-label"> Due Date <span class="text-danger">*</span></label>
        <input type="text" wire:model="form.due_date" class="form-control" placeholder="Enter Due Date" id="due_date" />
        @error('form.due_date')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label for="currency_code" class="col-form-label">Currency Code <span class="text-danger">*</span></label>
        <select id="currency_code" wire:model.change="form.currency_code" class="form-select">
            <option value="" selected disabled hidden>Select Currency Code</option>
            @foreach (config('env.currency_codes') as $key => $value)
                <option value="{{ $key }}"> {{ $key }} - {{ $value }}</option>
            @endforeach
        </select>
        @error('form.currency_code')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-12 col-md-6 mb-3">
        <label for="bank_account_id" class="col-form-label">Bank Account <span class="text-danger">*</span></label>
        <select id="bank_account_id" wire:model.change="form.bank_account_id" class="form-select">
            <option value="" selected disabled hidden>Select Bank Account</option>
            @foreach ($bank_accounts as $account)
                <option value="{{ $account->id }}">{{ substr(config('env.bank_account_types')[$account->account_type], 0, 1) }}: {{ $account->account_name }}</option>
            @endforeach
        </select>
        @error('form.bank_account_id')
        <div class="error text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    @if(count($users) > 0)
        <div class="col-12 mb-3">
            <label for="approvers_list" class="col-form-label">Approvers List</label>
            <p style="margin-bottom:8px;"><small>Select the users that need to be notified of this invoice</small></p>
            @foreach($users as $user)
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" value="{{ $user->email }}" wire:model="form.approvers_list" id="approver_{{ $user->id }}">
                    <label class="form-check-label" for="approver_{{ $user->id }}"> {{ $user->given_names }} {{ $user->surname }} </label>
                </div>
            @endforeach
        </div>
    @endif

    <div class="my-3">
        <div class="d-flex align-items-center justify-content-between">
            <p class="lead my-3">Line Items</p>
            {{-- <a wire:click="addNewItem" class="label-add"> <i class="ti ti-square-rounded-plus"></i>Add Line Item</a> --}}
            <div class="btn-group my-1">
                <button type="button" class="btn btn-primary" wire:click="addNewItem()">Add Line item</button>
                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split me-2" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    @foreach ($items as $item)
                        <li>
                            <a class="dropdown-item" wire:click="addNewItem({{ $item }})">{{ $item->description }}</a>
                        </li>
                    @endforeach
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <a class="dropdown-item" href="{{ route('tenant.lemarex.invoice.items') }}">Create New Item</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-view">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Quantity</th>
                        <th>Rate ($)</th>
                        <th>Discount (%)</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @if (sizeof($form->line_items) == 0)
                        <tr>
                            <td colspan="5">
                                <p class="text-center">No Line Items Found</p>
                            </td>
                        </tr>
                    @endif
                    @foreach ($form->line_items as $index => $line_item)
                        <tr wire:key="line-item-{{ $index }}">
                            <td>
                                <div class="input-table input-table-descripition">
                                    <input type="text" class="form-control" wire:model.live="form.line_items.{{ $index }}.description">
                                </div>
                            </td>
                            <td>
                                <div class="input-table">
                                    <input type="number" class="form-control" min="0" wire:model.live.debounce.300ms="form.line_items.{{ $index }}.quantity">
                                </div>
                            </td>
                            <td>
                                <div class="input-table">
                                    <input type="number" class="form-control" min="0" wire:model.live.debounce.300ms="form.line_items.{{ $index }}.rate">
                                </div>
                            </td>
                            <td>
                                <div class="input-table">
                                    <input type="number" class="form-control" min="0" wire:model.live.debounce.300ms="form.line_items.{{ $index }}.discount_percentage">
                                </div>
                            </td>
                            <td>
                                <a wire:click="removeItem({{ $index }})" class="btn btn-soft-danger" title="Remove Line">
                                    <i class="ti ti-trash"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="d-flex ">
            <div class="dropdown me-2">
                <a class="dropdown-toggle" data-bs-toggle="dropdown"> Add Tax Rate(s) </a>

                <div class="dropdown-menu">
                    <ul>
                        @foreach($tax_rates as $rate)
                            <li>
                                <a class="dropdown-item {{ $rate->disabled ? 'disabled' : '' }}" wire:click="addTaxRate('{{ $rate->id }}')">
                                    {{ $rate->name }} ({{ $rate->percentage }}%)
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="subtotal-div mb-3">
        <ul class="mb-3">
            <li>
                <h5>Sub-total</h5>
                <h6 class="h6">${{ number_format($subtotal, 2) }}</h6>
            </li>
            <li>
                <h5>Discount</h5>
                <h6 class="h6">${{ number_format($discount, 2) }}</h6>
            </li>
            @foreach($form->taxes as $index => $tax)
                <li>
                    <h5>{{ $form->taxes[$index]->name }} ({{ $form->taxes[$index]->percentage }}%)</h5>
                    <h6 class="h6"> ${{ number_format($form->taxes[$index]->amount, 2) }} </h6>
                </li>
            @endforeach
            <li>
                <h5>Tax total</h5>
                <h6 class="h6">${{ number_format($tax_total, 2) }}</h6>
            </li>
            <li>
                <h5>Total</h5>
                <h6 class="h6">${{ number_format($total, 2) }}</h6>
            </li>
        </ul>
    </div>

    <div class="col-12">
        <div class="mb-3" wire:ignore>
            <label class="col-form-label"> Header Terms</label>
            <textarea id="header_terms"> <pre>{!! $form->header_terms !!}</pre> </textarea>
        </div>
    </div>

    <div class="col-12">
        <div class="mb-3" wire:ignore>
            <label class="col-form-label"> Footer Terms </label>
            <textarea id="footer_terms" rows="20">{!! $form->footer_terms !!}</textarea>
        </div>
    </div>
</div>

@script
<script>
    $(document).ready(function () {
        // Get IDs for Select fields
        const selectIds = Array.from(document.getElementsByTagName('select')).map(el => el.id).filter((el) => el);

        selectIds.forEach(function (id) {
            let options = {
                placeholder: '',
                width: '100%',
                minimumResultsForSearch: 0,
            };
            const $el = $(`#${id}`);

            if ($el.is('[multiple]')) {
                options.closeOnSelect = false;
                options.multiple = true;
            }

            $el.on('change', function () {
                @this.set(`form.${id}`, $(this).val());
            })

            // For initial load
            $el.select2(options);

            // For DOM reloads
            Livewire.hook('morphed', ({el, component}) => {
                $el.select2(options);
            });
        });

        var obj = {
            autoUpdateInput: false,
            timePicker: false,
            singleDatePicker: true,
            showDropdowns: true,
            opens: 'center',
            drops: 'auto',
            locale: {
                format: 'YYYY-MM-DD'
            }
        };

        $('#due_date').daterangepicker(obj);
        $('#paid_at').daterangepicker(obj);

        $('#due_date').on('apply.daterangepicker', function (ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD'));
            @this.
            set('form.due_date', picker.startDate.format('YYYY-MM-DD'))
        });
        $('#paid_at').on('apply.daterangepicker', function (ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD'));
            @this.
            set('form.paid_at', picker.startDate.format('YYYY-MM-DD'))
        });

        let header_terms = $('#header_terms');
        header_terms.summernote({
            minHeight: 200,
        })
        header_terms.on('summernote.change', function (we, contents, $editable) {
            $wire.set('header_terms', contents)
            $wire.set('form.header_terms', contents)
        })

        let footer_terms = $('#footer_terms');
        footer_terms.summernote({
            minHeight: 200,
        })
        footer_terms.on('summernote.change', function (we, contents, $editable) {
            $wire.set('footer_terms', contents)
            $wire.set('form.footer_terms', contents)
        })
    });
</script>
@endscript