@extends('layouts.backend')


@section('content')
    <section class="privatePanel newInvoiceSection">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 menu">
                    <div class="col-lg-12 menuContent">
                        <ul>
                            <a href="/Private/ReadyLoads">
                                <span class="unread_items readyloadsItems @if($getThis->getUnreadReadyLoads()==0) hide @endif">{{$getThis->getUnreadReadyLoads()}}</span>
                                <li>To Invoice</li>
                            </a>
                            <a href="/Private/InvoicedLoads">
                                <li>Jobs Invoiced</li>
                            </a>
                            <a href="/Private/CompletedLoads">
                                <li>Completed Loads</li>
                            </a>
                            <a href="/Private/RejectedLoads">
                                <li>Voided Jobs</li>
                            </a>
                            <a href="/Private/Services">
                                <li>Services</li>
                            </a>
                            <a class="active" href="/Private/Invoices">
                                <span class="unread_items invoicesItems @if($getThis->getFinancialUnreadInvoices()==0) hide @endif">{{$getThis->getFinancialUnreadInvoices()}}</span>
                                <li>Invoices</li>
                            </a>
                            <a href="/Private/Customers">
                                <li>Customers</li>
                            </a>   
                            <a href="/Private/Messages">
                                <span class="unread_items messagesItems @if($getThis->getFinancialUnreadMessages()==0) hide @endif">{{$getThis->getFinancialUnreadMessages()}}</span>
                                <li>Messages</li>
                            </a>
                            <a href="/Private/Logout">
                                <li>Logout</li>
                            </a>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-10 content newLoad newInvoice">
                    <input type="hidden" name="type" value="new" />
                    <input type="hidden" name="invoice_id" value="" />
                    <input type="hidden" name="customer_id" value="{{ $user->id }}" />
                    <h2 class="title">New Invoice</h2>


                    <div class="row col-lg-12 form-group">

                        <div class="col-lg-2">
                            <label>Customer Type</label>
                            <select class="form-control" name="customer_type">
                                        <option value="0">Internal</option>
                                        <option value="1">External</option>
                            </select>
                        </div>

                        <div class="col-lg-4 invoice_to">
                            <label>To</label>
                            <div class="input-group mb-3 issueDateInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="calendar_addon"><i
                                            class="fa-solid fa-user"></i></span>
                                </div>
                                <input type="text" name="to" id="" class="form-control" value=""
                                    autocomplete="off" />
                                <div class="customersResults">

                                </div>
                            </div>

                        </div>
                        <div class="col-lg-3">
                            <label>Issue date</label>

                            <div class="input-group mb-3 issueDateInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="calendar_addon"><i
                                            class="fa-solid fa-calendar"></i></span>
                                </div>
                                <input type="text" name="issue_date" class="form-control"
                                    value="{{ date('d M Y', strtotime(date('Y-m-d'))) }}" />
                                <div class="input-group-append">
                                    <span class="input-group-text arrow_addon"><i class="fa-solid fa-caret-down"></i></span>
                                </div>
                                <div class="issueDateOptions hidden">
                                    <ul>
                                        <li><button class="dateItem" type="button"
                                                id="{{ date('d M Y', strtotime(date('Y-m-d'))) }}"><span
                                                    class="pickitem-text"><span>Today</span><span>{{ date('d M', strtotime(date('Y-m-d'))) }}</span></span></button>
                                        </li>
                                        <li><button class="dateItem" type="button"
                                                id="{{ date('d M Y', strtotime('+1 day', strtotime(date('Y-m-d')))) }}"><span
                                                    class="pickitem-text"><span>Tomorrow</span><span>{{ date('d M', strtotime('+1 day', strtotime(date('Y-m-d')))) }}</span></span></button>
                                        </li>
                                    </ul>

                                    <ul>
                                        <li><button type="button" class="getIssueDatePicker"><span
                                                    class="pickitem-text"><span><i class="fa-solid fa-calendar"></i> Pick
                                                        another date</span></button>
                                            <input type="text" class="selectedIssueDate novisibility" value="" />
                                        </li>
                                    </ul>
                                    <div class="close closeInvoiceDate"><button class="btn btn-info"
                                            id="issue">Close</button></div>
                                </div>
                            </div>


                        </div>
                        <div class="col-lg-3">
                            <label>Due date</label>

                            <div class="input-group mb-3 dueDateInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="calendar_addon"><i
                                            class="fa-solid fa-calendar"></i></span>
                                </div>
                                <input type="text" name="due_date" class="form-control"
                                    value="{{ date('d M Y', strtotime(date('Y-m-d'))) }}" />
                                <div class="input-group-append">
                                    <span class="input-group-text arrow_addon"><i class="fa-solid fa-caret-down"></i></span>
                                </div>
                                <div class="dueDateOptions hidden">
                                    <ul>
                                        <li><button class="dateItem" type="button"
                                                id="{{ date('d M Y', strtotime(date('Y-m-d'))) }}"><span
                                                    class="pickitem-text"><span>Today</span><span>{{ date('d M', strtotime(date('Y-m-d'))) }}</span></span></button>
                                        </li>
                                        <li><button class="dateItem" type="button"
                                                id="{{ date('d M Y', strtotime('+7 day', strtotime(date('Y-m-d')))) }}"><span
                                                    class="pickitem-text"><span>In 7
                                                        days</span><span>{{ date('d M', strtotime('+7 day', strtotime(date('Y-m-d')))) }}</span></span></button>
                                        </li>
                                        <li><button class="dateItem" type="button"
                                                id="{{ date('d M Y', strtotime('+14 day', strtotime(date('Y-m-d')))) }}"><span
                                                    class="pickitem-text"><span>In 14
                                                        days</span><span>{{ date('d M', strtotime('+14 day', strtotime(date('Y-m-d')))) }}</span></span></button>
                                        </li>

                                        <li><button class="dateItem" type="button"
                                                id="{{ date('d M Y', strtotime(date('Y-m-01', strtotime(date('Y-m-d', strtotime('+1 month', strtotime(date('Y-m-d')))))))) }}"><span
                                                    class="pickitem-text"><span>1st of next
                                                        month</span><span>{{ date('d M', strtotime(date('Y-m-01', strtotime(date('Y-m-d', strtotime('+1 month', strtotime(date('Y-m-d')))))))) }}
                                                    </span></span></button>
                                        </li>
                                        <li><button class="dateItem" type="button"
                                                id="{{ date('d M Y', strtotime(date('Y-m-t', strtotime(date('Y-m-d', strtotime('+1 month', strtotime(date('Y-m-d')))))))) }}"><span
                                                    class="pickitem-text"><span>End of next
                                                        month</span><span>{{ date('d M', strtotime(date('Y-m-t', strtotime(date('Y-m-d', strtotime('+1 month', strtotime(date('Y-m-d')))))))) }}
                                                    </span></span></button>
                                        </li>
                                    </ul>

                                    <ul>
                                        <li><button type="button" class="getDueDatePicker"><span
                                                    class="pickitem-text"><span><i class="fa-solid fa-calendar"></i> Pick
                                                        another date</span></button>
                                            <input type="text" class="selectedDueDate novisibility" value="" />
                                        </li>
                                    </ul>
                                    <div class="close closeInvoiceDate"><button class="btn btn-info"
                                            id="due">Close</button></div>
                                </div>
                            </div>


                        </div>
                    </div>

<div class="row col-lg-12 form-group additionalFields">

            <div class="col-lg-3 form-group">
                <label>Legal name</label>
                <input type="text" name="legal_name" class="form-control" placeholder="Company name" autocomplete="off" />
            </div>
            <div class="col-lg-3 form-group">
                <label>Building name/number</label>
                <input type="text" name="building_name_number" class="form-control" placeholder="e.g. Building Name" autocomplete="off" />
            </div>
            <div class="col-lg-4 form-group">
                <label>Street</label>
                <input type="text" name="street" class="form-control" placeholder="Street" autocomplete="off" />
            </div>
            <div class="col-lg-2 form-group">
                <label>Town/City</label>
                <input type="text" name="town_city" class="form-control" placeholder="" autocomplete="off" />
            </div>
            <div class="col-lg-3 form-group">
                <label>Postcode</label>
                <input type="text" name="postcode" class="form-control" placeholder="" autocomplete="off" />
            </div>
            <div class="col-lg-3 form-group">
                <label>Country</label>
                <input type="text" name="country" class="form-control" placeholder="" autocomplete="off" />
            </div>
            <div class="col-lg-3 form-group">
                <label>Vat Number</label>
                <input type="text" name="vat_number" class="form-control" placeholder="" autocomplete="off" />
            </div>
            <div class="col-lg-3 form-group">
                <label>Payment Contact Email</label>
                <input type="text" name="payment_contact_email" class="form-control" placeholder="" autocomplete="off" />
            </div>
</div>


                    <div class="row col-lg-12 form-group">
                    <div class="col-lg-4">
    <label>Select Jobs</label>
    <div class="jobsToInvoice">

    </div>
                    </div>
                        <div class="col-lg-2">
                            <label>Invoice number</label>
                            {{--
                                Invoice number is allocated atomically at draft creation
                                (see process.saveInvoice → allocateInvoiceNumber). We
                                intentionally do NOT render a preview from the settings
                                counter here, because that value is only an "intent" —
                                another clerk saving a draft in parallel would make it
                                wrong before this form ever submits. Show a dash; the
                                real number will be on the invoice row after save, and
                                the edit view renders it from the row itself.
                            --}}
                            <input type="text" name="invoice_number" class="form-control" disabled
                                value="# —" />
                        </div>
                        <div class="col-lg-3">
                            <label>Reference</label>
                            <div class="input-group mb-3 issueDateInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="calendar_addon"><i
                                            class="fa-solid fa-bookmark"></i></span>
                                </div>
                                <input type="text" name="reference" class="form-control" value=""
                                    autocomplete="off" />
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <label>Currency</label>
                            <div class="input-group mb-3 issueDateInput">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="calendar_addon"><i
                                            class="fa-solid fa-coins"></i></span>
                                </div>
                                <select class="form-control" name="currency">
                                    @foreach ($currencies as $currency)
                                        <option value="{{ $currency->id }}">{{ $currency->currency }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <hr />
                        <div class="row col-lg-12 form-group invoiceProducts">
                            <div class="row thead">
                                <div class="col-lg-2">Item</div>
                                <div class="col-lg-4">Description</div>
                                <div class="col-lg-1">Qty.</div>
                                <div class="col-lg-1">Price</div>
                                <div class="col-lg-2">Tax rate</div>
                                <div class="col-lg-1">Amount</div>
                                <div class="col-lg-1"></div>
                            </div>

                            <div class="row tbody productItem" id="item1">
                                <div class="col-lg-2"><input type="text" class="item form-control" value="" />
                                </div>
                                <div class="col-lg-4"><input type="text" class="description form-control"
                                        value="" /></div>
                                <div class="col-lg-1"><input type="text" class="qty form-control" value="" />
                                </div>
                                <div class="col-lg-1"><input type="text" class="price form-control" value="" />
                                </div>
                                <div class="col-lg-2">
                                    <select class="tax_rate form-control">
                                        <option value="0">No Tax</option>
                                        <option value="5">5%</option>
                                        <option value="10">10%</option>
                                        <option value="15">15%</option>
                                        <option value="20">20%</option>
                                    </select>
                                    <input type="hidden" class="vat_type" value="" />
                                </div>
                                <div class="col-lg-1"><input type="text" class="amount form-control" value=""
                                        readonly />
                                </div>
                                <div class="col-lg-1 alignRight"><i class="fa-solid fa-ellipsis-vertical productOptions"
                                        id="1"></i></div>
                                <div class="servicesResult">
                                </div>
                            </div>

                        </div>

                        <div class="row form-group invoiceSummar">
                            <div class="col-lg-12 row SubTotal">
                                <div class="col-lg-7"></div>
                                <div class="col-lg-5 row">
                                    <div class="col-lg-10">Subtotal</div>
                                    <div class="col-lg-2 alignRight sum">0.00</div>
                                </div>
                            </div>
                            <div class="col-lg-12 row TotalTax">
                                <div class="col-lg-7"></div>
                                <div class="col-lg-5 row">
                                    <div class="col-lg-10">Total Tax</div>
                                    <div class="col-lg-2 alignRight sum">0.00</div>
                                </div>
                            </div>
                            <div class="col-lg-12 row">
                                <div class="col-lg-7"></div>
                                <div class="col-lg-5 row">
                                    <hr />
                                </div>
                            </div>

                            <div class="col-lg-12 row Total">
                                <div class="col-lg-7"></div>
                                <div class="col-lg-5 row">
                                    <div class="col-lg-10"><b>Total</b></div>
                                    <div class="col-lg-2 alignRight sum">0.00</div>
                                </div>
                            </div>

                        </div>


                        <div class="row col-lg-12 form-group stepContent">
                            <div class="col-lg-12 error">TEST error</div>
                        </div>
                        <div class="row col-lg-12 form-group stepContent">
    <div class="col-lg-8"></div>
    <div class="col-lg-4 centered">
    <button class="btn btn-success invoiceBtn SendInvoice">Send</button> 
    <button class="btn btn-warning invoiceBtn SaveInvoice">Save</button> 
    <button class="btn btn-danger invoiceBtn CancelInvoice">Cancel</button>
</div>
                    </div> 

                    </div>



                </div>
            </div>
        </div>

    </section>
@endsection