@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 -->
            <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_clients.welcome_platform')</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.supplier_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_invoices.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">@lang('dashboard_cloneinvoice.supplier_name')</label>
                                                <select class="form-control select2">
                                                    <option value="AK">@lang('dashboard_cloneinvoice.supplier') 1</option>
                                                    <option value="HI">@lang('dashboard_cloneinvoice.supplier') 2</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label
                                                    class="control-label">@lang('dashboard_cloneinvoice.name_of_template')
                                                </label>
                                                <select class="form-control select2">
                                                    <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">@lang('dashboard_cloneinvoice.type') </label>
                                                <select class="form-control select2">
                                                    <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 name="invoice_date" 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="invoiceNumber">@lang('dashboard_invoices.invoice_number')</label>
                                                <input name="invoice_number" type="number" class="form-control" id="invoiceNumber"
                                                    placeholder="@lang('dashboard_invoices.invoice_number')">
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label for="shippingDate">@lang('dashboard_invoices.shipping_date')</label>
                                                <input name="shipping_date" type="date" class="form-control" id="shippingDate"
                                                    placeholder="@lang('dashboard_invoices.shipping_date')">
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label for="email">@lang('dashboard_invoices.email') </label>
                                                <input name="email" type="email" class="form-control" id="email"
                                                    placeholder="@lang('dashboard_invoices.email') ">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="control-label">@lang('dashboard_cloneinvoice.expiration_date')
                                                </label>
                                                <select class="form-control select2" name="expiration_date"> 
                                                    <option value="AK">@lang('dashboard_cloneinvoice.nothing')</option>
                                                    <option value="HI">@lang('dashboard_cloneinvoice.Dated')</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label class="control-label">@lang('dashboard_cloneinvoice.time_period')
                                                </label>
                                                <select class="form-control select2" name="time_period" id="timePeriodSelector">
                                                    <option selected disabled>
                                                        @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">@lang('dashboard_cloneinvoice.the_month')
                                                </label>
                                                <select class="form-control select2" name="month" id="monthSelector">
                                                    <option selected disabled>
                                                        @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 class="col-md-3 d-none" id="weekDaySelectorContainer">
                                            <div class="form-group">
                                                <label class="control-label">@lang('dashboard_cloneinvoice.today') </label>
                                                <select class="form-control select2" name="day" id="weekDaySelector">
                                                    <option selected disabled>@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">@lang('dashboard_cloneinvoice.today') </label>
                                                <select class="form-control select2" name="day_number" id="daySelector">
                                                    <option selected disabled 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 name="time" class="form-control" type="time" value="00:00" required id="clock">
                                            </div>

                                        </div>

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label
                                                    class="control-label">@lang('dashboard_cloneinvoice.send_an_automatic_email')</label>
                                                <select class="form-control select2" name="send_email">
                                                    <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-lg-2">
                                        <div class="form-group">
                                            <label class="control-label">@lang('dashboard_vouchercash.filter') </label>
                                            <select class="form-control select2" name="filter">
                                                <option value="AK">@lang('dashboard_vouchercash.filter_1') 1</option>
                                                <option value="HI">@lang('dashboard_vouchercash.filter_1')2</option>
                                            </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 name="shipping_address" class="form-control" id="shipaddress" rows="3"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label for="sendingAddress">@lang('dashboard_invoices.sending_address')</label>
                                                <textarea name="sending_address" class="form-control" id="sendingAddress" 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="group-a">
                                                    <div data-repeater-item class="row">
                                                        <div class="form-group col-lg-3">
                                                            <label
                                                                for="productname">@lang('dashboard_invoices.Product_or_service')</label>
                                                            <select class="form-control select2" name="product"
                                                                onchange="productChanged(this)">
                                                                <label
                                                                    for="productname">@lang('dashboard_invoices.choose_service_or_product')</label>

                                                                <option value="1"> Product 1</option>
                                                                <option value="2"> Product 2</option>
                                                                <option value="3"> Product 3</option>

                                                            </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 disabled name="sku" type="text" id="sku" class="form-control" />
                                                        </div>
                                                        <div class="form-group col-lg-2">
                                                            <label for="qu">@lang('dashboard_invoices.quantity')</label>
                                                            <input name="quantity" type="number" min="0" max="99999999" id="qu" class="form-control" />
                                                        </div>
                                                        <div class="form-group col-lg-2">
                                                            <label for="price">@lang('dashboard_invoices.price')</label>
                                                            <input name="price" type="number" min="0" max="99999999" step="any" id="price" class="form-control" />
                                                        </div>
                                                        <div class="form-group col-lg-2">
                                                            <label for="discount">@lang('dashboard_invoices.discount')</label>
                                                            <input name="discount" type="number" min="0" max="99999999" id="discount" 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"
                                                            oninput="taxChanged()">
                                                                <option selected value="{{ null }}">
                                                                    @lang('dashboard_cloneinvoice.choose_tax')
                                                                </option>
                                                                <option value="1">tax 1</option>
                                                                <option value="2">tax 2</option>
                                                                <option value="3">tax 3</option>
                                                            </select>
                                                        </div>

                                                        <div class="form-group col-lg-2">
                                                            <label for="total">@lang('dashboard_invoices.total')</label>
                                                            <input readonly name="invoice_total" type="text" id="total" class="form-control total" />
                                                        </div>
                                                        <div class="form-group col-lg-2">
                                                            <label for="stock">@lang('dashboard_invoices.warehouse')</label>
                                                            <select class="form-control select2"
                                                                onchange="warehouseChanged(this)" name="warehouse_id">
                                                                <option selected disabled>
                                                                    @lang('dashboard_invoices.choose_warehouse')</option>
                                                                <option value="1">Warehouse 1</option>
                                                                <option value="2">Warehouse 2</option>
                                                                <option value="3">Warehouse 3</option>

                                                            </select>
                                                        </div>

                                                        <div class="col-lg-3">
                                                            <div class="form-group">
                                                                <label
                                                                    class="control-label">@lang('dashboard_vouchercash.filter')
                                                                </label>
                                                                <select class="form-control select2" name="filter">
                                                                    <option value="AK">
                                                                        @lang('dashboard_vouchercash.filter_1') 1</option>
                                                                    <option value="HI">
                                                                        @lang('dashboard_vouchercash.filter_1')2</option>
                                                                </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>
                                                    </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>
                        </form>
                        <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">$0</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">

                                                    <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 name="taxes_total" id="pricesTax" readonly type="text" class="form-control"
                                                    style="width: auto !important">
                                            </div>
                                        </td>

                                    </tr>
                                    <tr class="supplierDebtDiscountRowContainer">

                                        <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" id="discount_type">

                                                    <option selected disabled>
                                                        @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_cloneinvoice.discount_value')</strong>
                                                    <p style="display: inline" id="percentag_to_value_p" hidden></p>
                                                    <input type="number" min="0" max="99999999" step="any"
                                                        id="discount_number" name="discount_number" class="form-control" />
                                                </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">$0</h4>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </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 name="invoice_notes" 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 name="account_statement_notes" 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 name="attachment" type="file" class="custom-file-input" id="customFile">
                                    <label class="custom-file-label"
                                        for="customFile">@lang('dashboard_invoices.import_file')</label>
                                </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-3">
                <div class="form-group">
                    <label for="total">@lang('dashboard_invoices.total')</label>
                    <h1 id="total">0$</h1>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="form-group">
                    <label for="balancedue">@lang('dashboard_invoices.due_balance')</label>
                    <h1 id="balancedue">0$</h1>
                </div>
            </div>
            <div class="col-lg-12">
                <button type="button" class="btn btn-info " aria-label="save">
                    @lang('dashboard_invoices.save')<i class="mdi mdi-content-save-alert"></i>
                </button> <button type="button" class="btn btn-success " aria-label="saveandsend">
                    @lang('dashboard_cloneinvoice.Save_and_send')<i class="mdi mdi-arrange-send-to-back
                        "></i></button>

                <button type="button" class="btn btn-danger " aria-label="saveandclose">
                    @lang('dashboard_addcashexpense.save_and_close') <i class="mdi mdi-arrange-send-to-back"></i></button>

                <a href="invoice.php"><button type="button" class="btn btn-primary " aria-label="vieworprint">
                        @lang('dashboard_invoices.preview_and_print') <i class="mdi mdi-printer-check"></i></button></a>

                <button type="" name="input_type" value="save" class="btn btn-danger " aria-label="save">
                    @lang('dashboard_invoices.cancel_and_print')<i class="mdi mdi-close-circle"></i>
                </button>
                <button type="button" class="btn btn-primary " aria-label="zeonvalue">
                    @lang('dashboard_invoices.make_value_zero') <i class="mdi mdi-octagram-outline"></i></button>


            </div>
        </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')
                    // show daySelector Cotainer
                    $('#daySelectorContainer').removeClass('d-none')
                    // hide week days selector container
                    $('#weekDaySelectorContainer').addClass('d-none')
                    // hide clock Cotainer
                    $('#clockContainer').addClass('d-none')

                    break;

                case 'monthly':
                    // hide monthSelector Cotainer
                    $('#monthSelectorContainer').addClass('d-none')
                    // show daySelector Cotainer
                    $('#daySelectorContainer').removeClass('d-none')
                    // hide week days selector container
                    $('#weekDaySelectorContainer').addClass('d-none')
                    // hide clock Cotainer
                    $('#clockContainer').addClass('d-none')
                    break;

                case 'weekly':
                    // hide monthSelector Cotainer
                    $('#monthSelectorContainer').addClass('d-none')
                    // hide daySelector Cotainer
                    $('#daySelectorContainer').addClass('d-none')
                    // show week days selector container
                    $('#weekDaySelectorContainer').removeClass('d-none')
                    // hide clock Cotainer
                    $('#clockContainer').addClass('d-none')
                    break;

                case 'daily':
                    // hide monthSelector Cotainer
                    $('#monthSelectorContainer').addClass('d-none')
                    // hide daySelector Cotainer
                    $('#daySelectorContainer').addClass('d-none')
                    // show week days selector container
                    $('#weekDaySelectorContainer').addClass('d-none')
                    // show clock Cotainer
                    $('#clockContainer').removeClass('d-none')
                    break;
            }
        }

    </script>
@endsection