@extends('layouts.master')
@section('title', 'Add New Invoice')
@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}">
@endpush
@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="mb-0">Add New Invoice</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-3 pt-4 pb-2">
                        <form action="{{ route('invoices.store') }}" id="ajaxForm" method="POST">
                            @csrf
                            <div class="row">
                                <div class="form-outline mb-4 col-12 col-md-3">
                                    <label class="form-label" for="invoice_no">Invoice Number</label>
                                    <input type="text" data-route="{{ route('invoice-no.format') }}" name="invoice_no" value="{{ old('invoice_no') }}" class="form-control" />
                                    @error('invoice_no')
                                    <span class="invalid_feedback">
                                      <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-3">
                                    <label class="form-label" for="invoice_date">Invoice Date</label>
                                    <input type="text" name="invoice_date" value="{{ old('invoice_date') }}" class="form-control datepicker" />
                                    @error('invoice_date')
                                    <span class="invalid_feedback">
                                      <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-3">
                                    <label class="form-label" for="due_date">Due Date</label>
                                    <input type="text" name="due_date" value="{{ old('due_date') }}" class="form-control datepicker" />
                                    @error('due_date')
                                    <span class="invalid_feedback">
                                      <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-3">
                                    <label class="form-label" for="currency">Currency</label>
                                    <select class="form-select select2 p-2" name="currency" required style="width: 100%">
                                        @foreach(config('invoice.currencies') as $key => $currency)
                                            <option @selected(old('currency') == $key) value="{{ $key }}">{{ $currency }}</option>
                                        @endforeach
                                    </select>
                                    @error('currency')
                                    <span class="invalid_feedback">
                                          <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-3">
                                    <label class="form-label" for="lang">Language</label>
                                    <select class="form-select select2 p-2" name="lang" required style="width: 100%">
                                        @foreach(config('invoice.languages') as $lang)
                                            <option @selected(old('lang') == $lang) value="{{ $lang }}">{{ $lang }}</option>
                                        @endforeach
                                    </select>
                                    @error('lang')
                                    <span class="invalid_feedback">
                                          <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-3">
                                    <label class="form-label" for="paid">Paid</label>
                                    <select class="form-select select2 p-2" name="paid" required style="width: 100%">
                                        <option @selected(old('paid') === 1) value="1">Yes</option>
                                        <option @selected(old('paid') === 0) value="0">No</option>
                                    </select>
                                    @error('paid')
                                    <span class="invalid_feedback">
                                          <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-2">
                                    <label class="form-label" for="customer">Customer |
                                        <a href="#" data-bs-toggle="modal" data-bs-target="#createCustomerModal"
                                           class="text-primary">Add New Customer</a>
                                    </label>
                                    <select class="form-select select2 p-2" data-route="{{ route('customers.data.format') }}" name="customer" required style="width: 100%">
                                        <option disabled selected value>Select Customer</option>
                                        @foreach($customers as $customer)
                                            <option @selected(old('customer') == $customer->id) value="{{ $customer->id }}">{{ $customer->name }} @if(!empty($customer->company_name)) ({{ $customer->company_name }}) @endif</option>
                                        @endforeach
                                    </select>
                                    @error('customer')
                                    <span class="invalid_feedback">
                                          <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-2">
                                    <label class="form-label" for="company">Company</label>
                                    <select class="form-select select2 p-2 company-paypal-status" name="company" required style="width: 100%">
                                        @foreach($companies as $company)
                                           <option @selected(old('company') == $company->id) value="{{ $company->id }}" data-paypal="{{ $company->is_paypal }}">{{ $company->name }} @if(!empty($company->company_name)) ({{ $company->company_name }}) @endif</option>
                                        @endforeach
                                    </select>
                                    @error('company')
                                    <span class="invalid_feedback">
                                        <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-2">
                                    <label class="form-label" for="include_bank_details">Include Bank Details</label>
                                    <div class="form-check form-switch mt-2">
                                        <input type="checkbox" class="form-check-input bank-details" name="include_bank_details" value="1" @checked(old('include_bank_details') == 1) style="cursor: pointer;">
                                        <label for="include_bank_details" class="form-check-label"></label>
                                    </div>
                                    @error('status')
                                    <span class="invalid_feedback">
                                        <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-3">
                                    <label class="form-label" for="vat">VATID</label>
                                    <input type="text" name="vat" value="{{ old('vat') }}" class="form-control" />
                                    @error('vat')
                                    <span class="invalid_feedback">
                                      <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-3">
                                    <label class="form-label" for="vat_type">VAT Type</label>
                                    <select class="form-select select2 p-2" name="vat_type" required style="width: 100%">
                                        @foreach(config('invoice.vat_types') as $type)
                                            <option @selected(old('vat_type') == $type) value="{{ $type }}">{{ ucwords($type) }}</option>
                                        @endforeach
                                    </select>
                                    @error('vat_type')
                                    <span class="invalid_feedback">
                                          <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-2">
                                    <label class="form-label" for="main_discount">Main Discount %</label>
                                    <input type="number" name="main_discount" min="0" value="{{ old('main_discount') }}" step="any" class="form-control" />
                                    @error('main_discount')
                                    <span class="invalid_feedback">
                                      <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-2">
                                    <label class="form-label" for="total">Main Discount Amount</label>
                                    <input type="number" readonly name="main_discount_amount" class="form-control main_discount_amount" step="any" value="0" />
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-2">
                                    <label class="form-label" for="total">Invoice Total</label>
                                    <input type="number" readonly name="total" class="form-control invoice_total" step="any" value="0" />
                                </div>
                                <div class="form-outline mb-4 col-12 col-md-6">
                                    <label class="form-label" for="terms">Terms</label>
                                    <textarea name="terms" class="form-control" >{{ old('terms') }}</textarea>
                                    @error('terms')
                                    <span class="invalid_feedback">
                                       <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="form-outline mb-4 mt-5 col-12 col-md-6 qr-status">
                                    <label class="form-label" for="status">Include payment QR code</label>
                                    <div class="form-check form-switch d-inline-block ms-3">
                                        <input type="checkbox" class="form-check-input qr-input" name="qr" value="1" @checked(old('qr', 1) == 1) style="cursor: pointer;">
                                        <label for="qr" class="form-check-label"></label>
                                    </div>
                                    @error('qr')
                                    <span class="invalid_feedback">
                                        <strong class="text-danger text-sm">{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                                <div class="col-12 line_items">
                                    <h3>Line Items</h3>
                                    <div class="row line_item first_line_item">
                                        <div class="form-outline mb-4 col-12 col-lg-3">
                                            <label class="form-label" for="desc">Description</label>
                                            <input type="text" name="desc[]" value="{{ old('desc') }}" class="form-control" />
                                            @error('desc')
                                            <span class="invalid_feedback">
                                                  <strong class="text-danger text-sm">{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                        <div class="form-outline mb-4 col-12 col-lg">
                                            <label class="form-label" for="qty">Qty</label>
                                            <input type="number" name="qty[]" step="any" min="0" value="{{ old('qty') }}" class="form-control line_qty" />
                                            @error('qty')
                                            <span class="invalid_feedback">
                                              <strong class="text-danger text-sm">{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="form-outline mb-4 col-12 col-lg">
                                            <label class="form-label" for="price">Price</label>
                                            <input type="number" name="price[]" step="any" min="0" value="{{ old('price') }}" class="form-control line_price" />
                                            @error('price')
                                            <span class="invalid_feedback">
                                              <strong class="text-danger text-sm">{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="form-outline mb-4 col-12 col-lg">
                                            <label class="form-label" for="tax_rate">Tax Rate %</label>
                                            <input type="number" name="tax_rate[]" step="any" min="0" value="{{ old('tax_rate') }}" class="form-control line_tax" />
                                            @error('tax_rate')
                                            <span class="invalid_feedback">
                                              <strong class="text-danger text-sm">{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="form-outline mb-4 col-12 col-lg">
                                            <label class="form-label" for="discount">Discount %</label>
                                            <input type="number" name="discount[]" step="any" min="0" value="{{ old('discount') }}" class="form-control line_discount" />
                                            @error('discount')
                                            <span class="invalid_feedback">
                                              <strong class="text-danger text-sm">{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="form-outline mb-4 col-12 col-lg">
                                            <label class="form-label" for="discount_amount">Discount Amount</label>
                                            <input type="number" name="discount_amount[]" step="any" min="0" value="{{ old('discount_amount') }}" class="form-control line_discount_amount" />
                                        </div>
                                        <div class="form-outline mb-4 col-12 col-lg">
                                            <label class="form-label" for="line_total">Line Total</label>
                                            <input type="number" name="line_total[]" step="any" min="0" readonly value="{{ old('line_total') }}" class="form-control line_total" />
                                            @error('line_total')
                                            <span class="invalid_feedback">
                                              <strong class="text-danger text-sm">{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>

                                        <div class="form-outline mb-4 col-12 col-lg-1 pt-1">
                                            <label class="form-label"> </label>
                                            <div>
                                            <button type="button" title="Add" class="btn btn-sm btn-outline-dark btn-rounded add-inv-item"><i class="fa fa-plus text-lg"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary btn-block mb-4 me-2">Save</button>
                                <a class="btn btn-secondary btn-block mb-4" href="{{ route('invoices.index') }}">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('invoices.invoice-item')
    @include('invoices.add-customer-modal')
@endsection

@push('scripts')
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/js/custom.js') }}"></script>
    <script>
        invoiceFormatInit();
        $(".datepicker:not([name='due_date'])").datepicker("setDate",'now');

        $('.bank-details, .qr-input').change(function () {
            $(this).val($(this).prop('checked') ? 1 : 0);
        }).change();

        showQrButton($('.company-paypal-status option:selected').data('paypal'))

        $('.company-paypal-status').change(function() {
            showQrButton($(this).find('option:selected').data('paypal'))
        });

        function showQrButton(paypalChk) {
            paypalChk != 1 ? $('.qr-status').hide().find('.qr-input').prop('checked', false).val(0)
              : $('.qr-status').show().find('.qr-input').prop('checked', true).val(1);
        }

    </script>
@endpush