@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_noticedebt.registering_credit_note') </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 d-none alert-danger allRequiredFieldsContainer mb-3 px-2 py-2">
                <div class="text-danger mx-4">
                    <div class="row">
                        <div class="d-flex flex-column">

                            <p class="text-danger mb-0">
                                @lang('dashboard_invoices.please_fill_all') : 
                            </p>
                            
                            <div class="mt-1 mb-3 text-danger">
                                <b class="my-1"> Client Name , Notice Date , Notice Number , Notice Title , Email , Filter , Account , Description , Amount , Tax , Total
                                </b>
                            </div>  
                        </div>  
                    </div>
                </div>
            </div>

            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">@lang('dashboard_noticedebt.registering_credit_note') </h4>
                        <p class="card-title-desc">
                            @lang('dashboard_noticedebt.please_follow_steps_below_to_registe_credit_note')</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_invoices.customer_and_data')</span>
                                </a>
                            </li>
                            <li class="nav-item waves-effect waves-light">
                                <a class="nav-link" data-toggle="tab" href="#accounts-1" role="tab">
                                    <span class="d-block d-sm-none"><i class="mdi mdi-basket-outline"></i></span>
                                    <span class="d-none d-sm-block">@lang('dashboard_addcashexpense.accounts')</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="mdi mdi-note-outline"></i></span>
                                    <span class="d-none d-sm-block">@lang('dashboard_invoices.notes')</span>
                                </a>
                            </li>
                        </ul>
                        <form class="" action="{{ route('dashboard.noticedebt.store') }}" method="POST" enctype="multipart/form-data">
                          @csrf
                            <!-- 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_invoices.client_name')
                                                </label>
                                                <select required class="form-control select2" id="project_id" name="project_id"  style="width: 100%"
                                                    onchange="showClientEmail(this,{{ $clients->toJson() }}, $('#clientEmail') )">
                                                    <option selected disabled value="{{ null }}">
                                                        @lang('dashboard_invoices.client_name')</option>
                                                    @foreach ($clients as $clien)
                                                        {{-- <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-lg-3">
                                            <div class="form-group">
                                                <label for="noticeDate">@lang('dashboard_noticedebt.notice_date')</label>
                                                <input required type="date" class="form-control" id="noticeDate" name="notice_date"
                                                    placeholder="@lang('dashboard_noticedebt.notice_date')">
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label
                                                    for="notificationnum">@lang('dashboard_noticedebt.notice_number')</label>
                                                <input required type="text" class="form-control" id="notificationnum" name="number"
                                                    placeholder="@lang('dashboard_noticedebt.notice_number')">
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label for="notificationaddress">@lang('dashboard_noticedebt.notice_title')
                                                </label>
                                                <input type="text" class="form-control" id="notificationddress" name="notice_title"
                                                    placeholder="@lang('dashboard_noticedebt.notice_title') ">
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label for="email">@lang('dashboard_noticedebt.email') </label>
                                                <input type="email" class="form-control" id="clientEmail" name="email"
                                                    placeholder="@lang('dashboard_noticedebt.email')">
                                            </div>
                                        </div>
                                        <div class="form-group col-lg-2">
                                            <div class="form-group">
                                                <label class="control-label col-lg-12">@lang('dashboard_vouchercash.filter')
                                                </label>
                                                <select class="form-control select2 " name="filter_id"  style="width: 100%">
                                                    <option selected value="{{ null }}">@lang('dashboard_vouchercash.no_filter')</option>
                                                    @foreach ($filters as $index => $filter)
                                                        <option value="{{ $filter->id }}">
                                                            {{ $filter->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    </p>
                                </div>
                                <div class="tab-pane" id="accounts-1" role="tabpanel">
                                    <p class="mb-0">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="repeater">
                                                    <div data-repeater-list="accounts">
                                                        <div data-repeater-item class="row">
                                                            <div class="form-group col-lg-3">
                                                                <label
                                                                    for="account">@lang('dashboard_noticedebt.account')</label>
                                                                <select required class="form-control select2 clientAccountsDropdown"  style="width: 100%"
                                                                    name="account">
                                                                    <option selected value="{{ null }}">
                                                                        @lang('dashboard_addcashexpense.choose_account')
                                                                    </option>
                                                                    @foreach ($accounts->where('account_type_id','!=',3) as $account)
                                                                        <option value="{{ $account->id }}">
                                                                            {{ $account->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <div class="form-group col-lg-3">
                                                                <label
                                                                    for="desc">@lang('dashboard_addcashexpense.description')</label>
                                                                <input type="product" id="desc" class="form-control" name="description" />
                                                            </div>
                                                            <div class="form-group col-lg-2">
                                                                <label
                                                                    for="price">@lang('dashboard_noticedebt.amount')</label>
                                                                <input required onchange="amountChanged(this)" type="number"
                                                                    min="1" max="99999999" step="any" id="price"
                                                                    name="amount" class="form-control amount" />
                                                            </div>
                                                            <div class="form-group col-lg-3">
                                                                <label for="tax">@lang('dashboard_invoices.tax')</label>
                                                                <select class="form-control select2" name="taxes"  style="width: 100%"
                                                                    onchange="accountTaxChanged(this)">
                                                                    <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 disabled type="text" id="total" name="total"
                                                                    class="form-control total" />
                                                            </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>
                                                    <input data-repeater-create type="button" onclick="addButtonPressed()"
                                                        class="btn btn-success mt-3 mt-lg-0"
                                                        value="@lang('dashboard_invoices.add')" />
                                                </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="1" class="text-right">
                                                            @lang('dashboard_invoices.total_sum')</td>
                                                        <td colspan="1" class="text-right">$<span class="chiqueTotalSum">0</span></td>
                                                        <input type="hidden" name="invoice_total" id="notice_debt_total">
                                                    </tr>
                                                    {{-- <tr>
                                                        <td colspan="1" class="border-0 text-right">
                                                            <strong>@lang('dashboard_invoices.total')</strong>
                                                        </td>
                                                        <td colspan="1" class="border-0 text-right">
                                                            <h4 class="m-0">$<span id="invoice_total" class="chiqueTotal">0</span> </h4>

                                                        </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="notes">@lang('dashboard_noticedebt.notice_notes') </label>
                                                <textarea class="form-control" id="notes" name="notice_notes" rows="3"></textarea>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label for="receipt">@lang('dashboard_noticedebt.account_statement_notes')
                                                </label>
                                                <textarea class="form-control" id="receipt" name="statement_notes" 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_noticedebt.quick_view_of_receipt_information')</h4>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="total">@lang('dashboard_invoices.total')</label>
                                <h1 id="total">$<span class="totalLabel">0</span></h1>

                            </div>
                        </div>
                        <div class="col-lg-12">
                            <button type="submit" 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="submit" 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="submit" 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>
                    </div>
                </div>
                </form>
            </div>
            <!-- End Page-content -->
        @endsection