@extends('dashboard.components.main')
    @section('content')
        <!-- ============================================================== -->
        <!-- Start right Content here -->
        <!-- ============================================================== -->
        <div class="main-content">
            <div class="page-content">
                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h4 class="page-title mb-0 font-size-18">@lang('dashboard_cloneinvoice.add_duplicate_invoice')
                            </h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item active">@lang('dashboard_clients.welcome_platform') </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end page title -->
                <!-- Errors -->
                @include('dashboard.components.errors')
                <!-- Success Message -->
                @if (session()->has('message'))
                    <p class="alert alert-success text-center">
                        {{ session()->get('message') }}
                    </p>
                @endif
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">@lang('dashboard_cloneinvoice.add_duplicate_invoice')</h4>
                            <p class="card-title-desc">
                                @lang('dashboard_cloneinvoice.please_follow_steps_below_to_create_an_invoice')</p>
                            <!-- Nav tabs -->
                            <ul class="nav nav-pills nav-justified" role="tablist">
                                <li class="nav-item waves-effect waves-light">
                                    <a class="nav-link active" data-toggle="tab" href="#home-1" role="tab">
                                        <span class="d-block d-sm-none"><i class="mdi mdi-account"></i></span>
                                        <span
                                            class="d-none d-sm-block">@lang('dashboard_cloneinvoice.client_and_templates')</span>
                                    </a>
                                </li>
                                <li class="nav-item waves-effect waves-light">
                                    <a class="nav-link" data-toggle="tab" href="#profile-1" role="tab">
                                        <span class="d-block d-sm-none"><i class="far fa-user"></i></span>
                                        <span class="d-none d-sm-block">@lang('dashboard_invoices.Product_and_tax')</span>
                                    </a>
                                </li>
                                <li class="nav-item waves-effect waves-light">
                                    <a class="nav-link" data-toggle="tab" href="#messages-1" role="tab">
                                        <span class="d-block d-sm-none"><i class="far fa-envelope"></i></span>
                                        <span class="d-none d-sm-block">@lang('dashboard_addcashexpense.notes')</span>
                                    </a>
                                </li>
                            </ul>
                            <form class="repeater" enctype="multipart/form-data">
                                <!-- Tab panes -->
                                <div class="tab-content p-3 text-muted">
                                    <div class="tab-pane active" id="home-1" role="tabpanel">
                                        <p class="mb-0">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-12 px-0">@lang('dashboard_cloneinvoice.customer_name')
                                                    </label>
                                                    <select required class="form-control select2" id="project_id"  style="width: 100%"
                                                        onchange="showClientEmail(this,{{ $clients->toJson() }}, $('#clientEmail') )">
                                                        @foreach ($clients as $clien)
                                                            {{-- <option value=""></option>
                                                            --}}
                                                            <optgroup label="{{ $clien->name }}">
                                                                @foreach ($clien->project as $projectIndex)
                                                                    <option value="{{ $projectIndex->id }}" @if ($projectIndex->id == @$project->id)
                                                                        selected
                                                                @endif>{{ $projectIndex->name }}
                                                                </option>
                                                        @endforeach
                                                        </optgroup>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-12 px-0">@lang('dashboard_cloneinvoice.name_of_template')
                                                    </label>
                                                    <input required type="text" name="name_of_template" class="form-control">
                                                    {{-- <select required class="form-control select2"  style="width: 100%">
                                                        <option value="AK">@lang('dashboard_cloneinvoice.mold')1</option>
                                                        <option value="HI">@lang('dashboard_cloneinvoice.mold')2</option>
                                                    </select> --}}
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-12 px-0">@lang('dashboard_cloneinvoice.type')
                                                    </label>
                                                    <select required class="form-control select2"  style="width: 100%">
                                                        <option value="AK">@lang('dashboard_cloneinvoice.register')</option>
                                                        <option value="HI">@lang('dashboard_cloneinvoice.remind')</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="form-group">
                                                    <label
                                                        for="invoicedate">@lang('dashboard_cloneinvoice.starting_date')</label>
                                                    <input required type="date" class="form-control" id="invoicedate"
                                                        placeholder="@lang('dashboard_cloneinvoice.starting_date')">
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="form-group">
                                                    <label
                                                        for="cloneInvoiceNumber">@lang('dashboard_cloneinvoice.invoice_number')</label>
                                                    <input required type="text" class="form-control" id="cloneInvoiceNumber"
                                                        placeholder="@lang('dashboard_cloneinvoice.invoice_number')">
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="form-group">
                                                    <label
                                                        for="invoicedue">@lang('dashboard_invoices.shipping_date')</label>
                                                    <input type="date" class="form-control" id="shipdate"
                                                        placeholder="@lang('dashboard_invoices.shipping_date')">
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="form-group">
                                                    <label for="invoicenum">@lang('dashboard_cloneinvoice.email')</label>
                                                    <input type="email" class="form-control" id="clientEmail"
                                                        placeholder="@lang('dashboard_cloneinvoice.email')">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-12 px-0">@lang('dashboard_cloneinvoice.expiration_date')
                                                    </label>
                                                    <select required class="form-control select2"  style="width: 100%">
                                                        <option value="AK">@lang('dashboard_cloneinvoice.yes') </option>
                                                        <option value="HI">@lang('dashboard_cloneinvoice.no') </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-12 px-0">@lang('dashboard_cloneinvoice.time_period')
                                                    </label>
                                                    <select required class="form-control select2"  style="width: 100%" id="timePeriodSelector">
                                                        <option selected disabled value="{{ null }}">
                                                            @lang('dashboard_cloneinvoice.choose_time_period')</option>
                                                        <option value="yearly">@lang('dashboard_cloneinvoice.annual')
                                                        </option>
                                                        <option value="monthly">@lang('dashboard_cloneinvoice.monthly')
                                                        </option>
                                                        <option value="weekly">@lang('dashboard_cloneinvoice.weekly')
                                                        </option>
                                                        <option value="daily">@lang('dashboard_cloneinvoice.daily')</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3 d-none" id="monthSelectorContainer">
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-12 px-0">@lang('dashboard_cloneinvoice.the_month')
                                                    </label>
                                                    <div class="d-flex flex-row">
                                                        <select required class="form-control select2"  style="width: 100%" id="monthSelector">
                                                            <option selected disabled value="{{ null }}">
                                                                @lang('dashboard_cloneinvoice.choose_the_month')</option>
                                                            <option name="January" value="Jan">January</option>
                                                            <option name="February" value="Feb">February</option>
                                                            <option name="March" value="Mar">March</option>
                                                            <option name="April" value="Apr">April</option>
                                                            <option name="May" value="May">May</option>
                                                            <option name="June" value="Jun">June</option>
                                                            <option name="July" value="Jul">July</option>
                                                            <option name="August" value="Aug">August</option>
                                                            <option name="September" value="Sep">September</option>
                                                            <option name="October" value="Oct">October</option>
                                                            <option name="November" value="Nov">November</option>
                                                            <option name="December" value="Dec">December</option>
                                                        </select>
                                                        {{-- Every
                                                        --}}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3 d-none" id="weekDaySelectorContainer">
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-12 px-0">@lang('dashboard_cloneinvoice.today')
                                                    </label>
                                                    <select required class="form-control select2"  style="width: 100%" id="weekDaySelector">
                                                        <option selected disabled value="{{ null }}">
                                                            @lang('dashboard_cloneinvoice.choose_today') </option>
                                                        <option value="sat">Saturday</option>
                                                        <option value="sun">Sunday</option>
                                                        <option value="mon">Monday</option>
                                                        <option value="tue">Tuesday</option>
                                                        <option value="wed">Wednsday</option>
                                                        <option value="thu">Thursday</option>
                                                        <option value="fri">Friday</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3 d-none" id="daySelectorContainer">
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-12 px-0">@lang('dashboard_cloneinvoice.today')
                                                    </label>
                                                    <select required class="form-control select2"  style="width: 100%" id="daySelector">
                                                        <option selected disabled value="{{ null }}" value="{{ null }}">
                                                            @lang('dashboard_cloneinvoice.choose_today')</option>
                                                        <option value="01">1st</option>
                                                        <option value="02">2nd</option>
                                                        <option value="03">3rd</option>
                                                        <option value="04">4th</option>
                                                        <option value="05">5th</option>
                                                        <option value="06">6th</option>
                                                        <option value="07">7th</option>
                                                        <option value="08">8th</option>
                                                        <option value="09">9th</option>
                                                        <option value="10">10th</option>
                                                        <option value="11">11th</option>
                                                        <option value="12">12th</option>
                                                        <option value="13">13th</option>
                                                        <option value="14">14th</option>
                                                        <option value="15">15th</option>
                                                        <option value="16">16th</option>
                                                        <option value="17">17th</option>
                                                        <option value="18">18th</option>
                                                        <option value="19">19th</option>
                                                        <option value="20">20th</option>
                                                        <option value="21">21st</option>
                                                        <option value="22">22nd</option>
                                                        <option value="23">23rd</option>
                                                        <option value="24">24th</option>
                                                        <option value="25">25th</option>
                                                        <option value="26">26th</option>
                                                        <option value="27">27th</option>
                                                        <option value="28">28th</option>
                                                        <option value="29">29th</option>
                                                        <option value="30">30th</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-3 d-none" id="clockContainer">
                                                <div class="form-group">
                                                    <label class="control-label">@lang('dashboard_cloneinvoice.clock')
                                                    </label>
                                                    <input required class="form-control" type="time" value="00:00" required
                                                        id="clock">
                                                </div>
                                            </div>
                                            <div class="col-lg-3">
                                                <div class="form-group">
                                                    <label for="date">@lang('dashboard_cloneinvoice.date')</label>
                                                    <input required type="date" class="form-control" id="date"
                                                        placeholder="@lang('dashboard_cloneinvoice.date')">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label
                                                        class="control-label col-md-12 px-0">@lang('dashboard_cloneinvoice.send_an_automatic_email')</label>
                                                    <select class="form-control select2"  style="width: 100%">
                                                        <option value="AK">@lang('dashboard_cloneinvoice.yes')</option>
                                                        <option value="HI">@lang('dashboard_cloneinvoice.no')</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-2 px-0">
                                            <div class="form-group">
                                                <label
                                                    class="control-label col-md-12 px-0">@lang('dashboard_vouchercash.filter')
                                                </label>
                                                <select class="form-control select2 "  style="width: 100%">
                                                    <option selected disabled value="{{ null }}">
                                                        @lang('dashboard_vouchercash.filter')</option>
                                                    @foreach ($filters as $index => $filter)
                                                        <option value="{{ $filter->id }}">
                                                            {{ $filter->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label
                                                        for="shipaddress">@lang('dashboard_invoices.shipping_address')</label>
                                                    <textarea class="form-control" id="shipaddress" rows="3"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label
                                                        for="shipaddress">@lang('dashboard_invoices.sending_address')</label>
                                                    <textarea class="form-control" id="shipaddress" rows="3"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        </p>
                                    </div>
                                    <div class="tab-pane" id="profile-1" role="tabpanel">
                                        <p class="mb-0">
                                        <div class="col-12">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div data-repeater-list="products">
                                                        <div data-repeater-item class="row">
                                                            <div class="form-group col-lg-3">
                                                                <label
                                                                    for="productname">@lang('dashboard_invoices.Product_or_service')</label>
                                                                <select required class="form-control select2" name="product"  style="width: 100%"
                                                                    onchange="productChanged(this, '{{ route('dashboard.invoices.get.product') }}')">
                                                                    <label
                                                                        for="productname">@lang('dashboard_invoices.choose_service_or_product')</label>
                                                                    <option selected disabled value="{{ null }}">
                                                                        @lang('dashboard_invoices.Product_or_service')
                                                                    </option>
                                                                    @foreach ($products as $index => $product)
                                                                        <option
                                                                            value="{{ $product->id . ',' . $product->type }}"
                                                                            id="product{{ $index }}">
                                                                            {{ $product->name . '( ' . $product->type . ' )' }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-lg-2">
                                                                <label
                                                                    for="productdesc">@lang('dashboard_invoices.product_description')</label>
                                                                <input type="text" name="description" disabled
                                                                    id="productdesc" class="form-control" />
                                                            </div>
                                                            <div class="form-group col-lg-2">
                                                                <label for="sku">@lang('dashboard_invoices.sku')</label>
                                                                <input type="text" id="sku" name="sku" disabled
                                                                    class="form-control sku" />
                                                            </div>
                                                            <div class="form-group col-lg-2">
                                                                <label for="qu">@lang('dashboard_invoices.quantity')</label>
                                                                <input required type="number" min="0" max="99999999" id="qu"
                                                                    name="quantity" disabled
                                                                    onchange="quantity(this, {{ $products->toJson() }})"
                                                                    class="form-control" />
                                                            </div>
                                                            <div class="form-group col-lg-2">
                                                                <label for="qu">@lang('dashboard_invoices.price')</label>
                                                                <input required type="number" disabled min="0"
                                                                    max="99999999" step="any" id="qu" name="price"
                                                                    class="form-control" />
                                                            </div>
                                                            <div class="form-group col-lg-2" hidden>
                                                                <label
                                                                    for="">@lang('dashboard_invoices.product_without_tax')</label>
                                                                <input type="text" disabled name="product_without_tax"
                                                                    class="form-control">
                                                            </div>
                                                            <div class="form-group col-lg-2">
                                                                <label
                                                                    for="qu">@lang('dashboard_invoices.discount_percentage')</label>
                                                                <input type="number" min="0" max="99999999" id="qu"
                                                                    name="product_discount" onchange="discountProduct(this)"
                                                                    class="form-control" />
                                                            </div>
                                                            <div class="form-group col-lg-2">
                                                                <label for="tax">@lang('dashboard_invoices.tax')</label>
                                                                <select class="form-control select2" name="taxes"  style="width: 100%"
                                                                oninput="taxTotal()">
                                                                    <option selected value="{{ null }}">
                                                                        @lang('dashboard_invoices.no_tax'){{ ' (' . '0' . ' ٪)' }}
                                                                    </option>
                                                                    @foreach ($taxes as $index => $tax)
                                                                        <option value="{{ $tax->id }}">
                                                                            {{ $tax->name . ' (' . $tax->percentage . ' ٪)' }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-lg-2">
                                                                <label for="total">@lang('dashboard_invoices.total')</label>
                                                                <input type="text" name="total" disabled="disabled"
                                                                    class="total form-control" />
                                                            </div>
                                                            <div class="form-group col-lg-2">
                                                                <label
                                                                    for="stock">@lang('dashboard_invoices.warehouse')</label>
                                                                <select required class="form-control select2"  style="width: 100%"
                                                                    onchange="warehouseChanged(this)" name="warehouse_id">
                                                                    <option selected disabled value="{{ null }}">
                                                                        @lang('dashboard_invoices.choose_warehouse')
                                                                    </option>
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-lg-2">
                                                                <div class="form-group">
                                                                    <label
                                                                        class="control-label">@lang('dashboard_vouchercash.filter')
                                                                    </label>
                                                                    <select class="form-control select2 "  style="width: 100%">
                                                                        <option selected disabled value="{{ null }}">
                                                                            @lang('dashboard_vouchercash.filter')</option>
                                                                        @foreach ($filters as $index => $filter)
                                                                            <option value="{{ $filter->id }}">
                                                                                {{ $filter->name }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-2 align-self-center">
                                                                <button type="button" data-repeater-delete
                                                                    class="btn btn-primary " aria-label="Profile">
                                                                    <i class="mdi mdi-delete-alert" aria-hidden="true"></i>
                                                                </button>
                                                            </div>
                                                            <!-- Add Total Label -->
                                                            <div class="col-lg-12 flex-row text-center my-1 d-none">
                                                                <div class="d-flex flex-row justify-content-center"
                                                                    style="width: 100%"><span class="h4 inline-block">$
                                                                    </span>
                                                                    <p class="h4 addTotalLabel" name="addTotalResult">0</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="mt-2 d-flex flex-row align-items-center">
                                                        <input data-repeater-create type="button"
                                                            class="btn btn-success mx-1"
                                                            value="@lang('dashboard_invoices.add')"
                                                            onclick="addButtonPressed()" />
                                                        <button id="AddTotalButton" type="button"
                                                            class="btn btn-success  mx-1" onclick="btnAddTotalClicked(this)"
                                                            aria-label="alltotal">
                                                            @lang('dashboard_invoices.add_total')</button>
                                                        <p class="h3 mb-0 mx-auto d-none" id="addTotalResult"></p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="table-responsive mb-0" data-pattern="priority-columns">
                                                <table id="tech-companies-1" class="table table-striped">
                                                    <tbody>
                                                        <tr>
                                                            <td colspan="2" class="text-right">
                                                                @lang('dashboard_invoices.total_sum')</td>
                                                            <td class="text-right"> $ <p style="display: inline"
                                                                    id="tax_total">0</p> <input type="hidden"
                                                                    name="tax_total" id="tax_total_input"></td>
                                                        </tr>
                                                        <tr>
                                                            <td colspan="2" class="text-right">
                                                                @lang('dashboard_invoices.tax_type') </td>
                                                            <td class="border-0 text-right">
                                                                <div class="d-flex justify-content-start">
                                                                    <select class="select2 " name="tax_type" id="tax_type"  style="width: 200px"
                                                                        onchange="taxTotal()">
                                                                        <option value="inclusive">
                                                                            @lang('dashboard_invoices.included_tax')
                                                                        </option>
                                                                        <option value="exclusive">
                                                                            @lang('dashboard_invoices.out_of_tax')
                                                                        </option>
                                                                        <option value="out">
                                                                            @lang('dashboard_invoices.without_tax')</option>
                                                                    </select>
                                                                    <input id="pricesTax" readonly name="taxes_total" type="text"
                                                                        class="form-control ml-2" style="width: auto !important">
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        {{-- <tr>
                                                            <td colspan="2" class="text-right">
                                                                @lang('dashboard_invoices.discount_percentage&value_of_discount')
                                                            </td>
                                                            <td class="border-0 text-right">
                                                                <div
                                                                    class="d-flex justify-content-start align-items-center">
                                                                    <select class="select2" name="discount_type"  style="width: 200px"
                                                                        id="discount_type" onchange="ChiqueDiscount(this)">
                                                                        <option selected disabled value="{{ null }}">
                                                                            @lang('dashboard_invoices.Choose_discount_method')
                                                                        </option>
                                                                        <option value="percentage">
                                                                            @lang('dashboard_invoices.percentage')
                                                                        </option>
                                                                        <option value="value">
                                                                            @lang('dashboard_invoices.value')</option>
                                                                    </select>
                                                                    <div class=" mr-3">
                                                                        <strong id="percentag_to_value"
                                                                            hidden>@lang('dashboard_invoices.discount_percentage')</strong>
                                                                        <p style="display: inline" id="percentag_to_value_p"
                                                                            hidden></p>
                                                                        <input type="text" id="discount_number"
                                                                            name="discount_number" class="form-control ml-2" />
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr> --}}
                                                        <tr>
                                                            <td colspan="2" class="border-0 text-right">
                                                                <strong>@lang('dashboard_invoices.total')</strong>
                                                            </td>
                                                            <td class="border-0 text-right">
                                                                <h4 class="m-0"> $ <span id="invoice_total"
                                                                        style="display:inline"> 0 </span>
                                                                </h4>
                                                                <input type="hidden" name="invoice_total"
                                                                    id="invoice_total_input">
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div id="outappend">
                                                <div id="prodstodiscount">
                                                </div>
                                            </div>
                                        </div>
                                        </p>
                                    </div>
                                    <div class="tab-pane" id="messages-1" role="tabpanel">
                                        <p class="mb-0">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label for="invoicenotes">@lang('dashboard_invoices.invoice_notes')
                                                    </label>
                                                    <textarea class="form-control" id="invoicenotes" rows="3"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label for="accountingnote">@lang('dashboard_invoices.statement_notes')
                                                    </label>
                                                    <textarea class="form-control" id="accountingnote" rows="3"></textarea>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label class="control-label">@lang('dashboard_invoices.upload_file')
                                                    </label>
                                                    <div class="custom-file">
                                                        <input type="file" class="custom-file-input" name="file"
                                                            id="customFile">
                                                        <label class="custom-file-label"
                                                            for="customFile">@lang('dashboard_invoices.import_file') </label>
                                                            <p hidden id="uploaded-file"></p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        </p>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title mb-4">@lang('dashboard_invoices.quick_view_of_billing_information')</h4>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="final_invoice">@lang('dashboard_invoices.total')</label>
                                    <br>
                                    <h1 id="final_invoice" style="display: inline">0</h1>
                                    <h1 style="display: inline">$</h1>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="balancedue">@lang('dashboard_invoices.due_balance')</label>
                                    <br>
                                    <h1 id="balancedue" style="display: inline">0</h1>
                                    <h1 style="display: inline">$</h1>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <button type="button" name="input_type" value="save" class="btn btn-info " id="save"
                                    aria-label="save">
                                    @lang('dashboard_invoices.save')<i class="mdi mdi-content-save-alert"></i>
                                </button>
                                <button type="button" class="btn btn-success" id="saveAndSend" name="input_type"
                                    value="save_send" aria-label="saveandsend">
                                    @lang('dashboard_invoices.save_and_send')<i class="mdi mdi-arrange-send-to-back"></i>
                                </button>
                                <button type="button" name="input_type" value="show_print" class="btn btn-primary "
                                    aria-label="vieworprint" id="previewAndPrint">
                                    @lang('dashboard_invoices.preview_and_print') <i class="mdi mdi-printer-check"></i>
                                </button>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- End Page-content -->
            @endsection
            @section('custom_script')
                <script>
                    $(document).ready(() => {
                        showTimeSelectors()
                    })
                    $('#timePeriodSelector').change(() => {
                        showTimeSelectors()
                    })
                    // Show and Hide time selectors depending on the selected timespan
                    function showTimeSelectors() {
                        // get the time period
                        switch ($('#timePeriodSelector').val()) {
                            case 'yearly':
                                // show monthSelector Cotainer
                                $('#monthSelectorContainer').removeClass('d-none')
                                $('#monthSelector').attr('required', true)
                                // show daySelector Cotainer
                                $('#daySelectorContainer').removeClass('d-none')
                                $('#daySelector').attr('required', true)
                                // hide week days selector container
                                $('#weekDaySelectorContainer').addClass('d-none')
                                $('#weekDaySelector').removeAttr('required')
                                // hide clock Cotainer
                                $('#clockContainer').addClass('d-none')
                                $('#clock').removeAttr('required')
                                break;
                            case 'monthly':
                                // hide monthSelector Cotainer
                                $('#monthSelectorContainer').addClass('d-none')
                                $('#monthSelector').removeAttr('required')
                                // show daySelector Cotainer
                                $('#daySelectorContainer').removeClass('d-none')
                                $('#daySelector').attr('required', true)
                                // hide week days selector container
                                $('#weekDaySelectorContainer').addClass('d-none')
                                $('#weekDaySelector').removeAttr('required')
                                // hide clock Cotainer
                                $('#clockContainer').addClass('d-none')
                                $('#clock').removeAttr('required')
                                break;
                            case 'weekly':
                                // hide monthSelector Cotainer
                                $('#monthSelectorContainer').addClass('d-none')
                                $('#monthSelector').removeAttr('required')
                                // hide daySelector Cotainer
                                $('#daySelectorContainer').addClass('d-none')
                                $('#daySelector').removeAttr('required')
                                // show week days selector container
                                $('#weekDaySelectorContainer').removeClass('d-none')
                                $('#weekDaySelector').attr('required', true)
                                // hide clock Cotainer
                                $('#clockContainer').addClass('d-none')
                                $('#clock').removeAttr('required')
                                break;
                            case 'daily':
                                // hide monthSelector Cotainer
                                $('#monthSelectorContainer').addClass('d-none')
                                $('#monthSelector').removeAttr('required')
                                // hide daySelector Cotainer
                                $('#daySelectorContainer').addClass('d-none')
                                $('#daySelector').removeAttr('required')
                                // show week days selector container
                                $('#weekDaySelectorContainer').addClass('d-none')
                                $('#weekDaySelector').removeAttr('required')
                                // show clock Cotainer
                                $('#clockContainer').removeClass('d-none')
                                $('#clock').attr('required', true)
                                break;
                        }
                    }
                </script>
            @endsection