@extends('layouts.master')

@section('title', 'New Entry | Alboosh - Timeless authenticity, born of the desert')

@section('title-topbar', __('basic.new entry'))

<!-- css insert -->
@section('css')

<!-- select 2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css"
    integrity="sha512-aD9ophpFQ61nFZP6hXYu4Q/b/USW7rpLCQLX6Bi0WJHXNO7Js/fUENpBQf/+P4NtpzNX0jSgR5zVvPOJp+W2Kg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- boostrap datepicker -->
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />

@endsection

@section('fixedcontent')
<!-- session successful message -->
@if (Session::has('success'))
<div id="flash-msg" class="shadow pt-3">
    <div class="d-flex justify-content-between mb-2">
        <i class="fas fs-1 fa-check"></i>
        <a id="flash-msg-btn" class="text-blue-300 clickable-item-pointer"><i class="fas fa-times"></i></a>
    </div>
    <h3>Sent Successfully</h3>
    <p class="text-blue-300">{{ Session::get('success') }}</p>
</div>
@endif
@endsection

<!-- content insert -->
@section('content')

<div class="container-fluid px-0 px-md-2 mt-3">

    <!-- page title link -->
    <div class="d-sm-flex align-items-center justify-content-between mb-3">
        <span class="mb-0">
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.home') }}">{{ __('basic.dashboard') }}
                |</a>
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.acc_entry.index') }}">{{
                __('basic.entries') }} | </a>
            <a class="text-gray-300">{{ __('basic.new entry') }}</a>
        </span>
    </div>

    @foreach ($errors->all() as $error)
    <div class="text-red"><i class="fas fa-exclamation me-1"></i> {{ $error }}</div>
    @endforeach

    <form id="myform_entry" method="POST" action="{{ route('sett.acc_entry.store') }}" enctype="multipart/form-data">
        @csrf

        <div class="card card-input shadow mb-3 pb-3">

            <!-- Card Header - Dropdown -->
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 fw-bold text-gray-500"><i class="fas fa-receipt me-1"></i>
                    {{ __('basic.details') }}</h6>
            </div>

            <!-- Card Body -->
            <div class="card-body px-4 px-md-5">
                <div class="row">
                    <div class="col-12 mb-2">
                        <label class="form-label">{{ __('basic.date') }}
                            <small>({{ __('basic.required') }})</small></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text"><i class="bi bi-calendar2-week-fill"></i>
                                </div>
                            </div>
                            <input name="date" type="text"
                                value="@if(old('date')) {{ old('date') }} @else {{ date('Y-m-d') }} @endif"
                                class="form-control hasdatetimepicker @error('date') is-invalid @enderror"
                                placeholder="YYYY/MM/DD" required>
                        </div>
                        <span id="date" class="error-msg-form"></span>

                        @error('date')
                        <span class="error-msg-form">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>

                    <div class="col-12 mb-3">
                        <label class="form-label"> {{ __('basic.currency') }}
                            <small>({{ __('basic.required') }})</small></label>
                        <select id="currency_id"
                            class="select2-no-search select2-hidden-accessible @error('currency_id') is-invalid @enderror"
                            name="currency_id" required>
                            @foreach ($currencies as $item)
                            <option value="{{ $item->id }}">
                                {{ $item->name . ' - ' . $item->code }}
                            </option>
                            @endforeach
                        </select>
                        <div id="currency_id-js-error-valid"></div>

                        @error('currency_id')
                        <span class="error-msg-form">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>

                    @if(Auth::user()->branch_id == 0)
                    <div class="col-12 mb-2">
                        <label class="form-label">{{ __('basic.branch') }}
                            <small>({{ __('basic.required') }})</small></label>
                        <select
                            class="js-example-basic-single select2-hidden-accessible @error('branch_id') is-invalid @enderror"
                            name="branch_id" required>
                            @foreach ($branches as $item)
                            <option value="{{ $item->id }}">
                                {{ $item->name }}
                            </option>
                            @endforeach
                        </select>
                        @error('branch_id')
                        <span class="error-msg-form">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>
                    @endif

                    <div class="col-12">
                        <div class="mb-3">
                            <label class="form-label">{{ __('basic.note') }} <small>({{
                                    __('basic.optional') }})</small></label>
                            <textarea name="note" class="form-control" placeholder="Write here your notes .." rows="4"
                                spellcheck="false">{{ old('note') }}</textarea>
                        </div>
                        @error('note')
                        <span class="error-msg-form">
                            {{ $message }}
                        </span>
                        @enderror
                    </div>

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


        <div class="row">
            <div class="card card-input shadow mb-3 pb-3">

                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 fw-bold text-gray-500"><i class="fas fa-receipt me-1"></i>
                        {{ __('basic.accounts') }}</h6>
                </div>

                <!-- Card Body -->
                <div class="card-body px-4 px-md-5">

                    <div class="row py-3 px-4 mb-3 b-r-l-cont" style="background-color: #f3f3f3">
                        <div class="col-3">
                            <h6 class="fw-bold mb-0">{{ __('basic.account name') }}</h6>
                        </div>
                        <div class="col-3">
                            <h6 class="fw-bold mb-0">{{ __('basic.description') }}</h6>
                        </div>
                        <div class="col-3">
                            <h6 class="fw-bold mb-0">{{ __('basic.debit') }}</h6>
                        </div>
                        <div class="col-3">
                            <h6 class="fw-bold mb-0">{{ __('basic.credit') }}</h6>
                        </div>
                    </div>

                    <div id="new_entry_item_cont">

                        <div class="row mb-2">
                            <div class="col-3">
                                <select
                                    class="js-example-basic-single select2-hidden-accessible @error('name') is-invalid @enderror"
                                    name="name[]" required>
                                    <option selected>
                                        {{ __('basic.select account') }}
                                    </option>
                                    @foreach ($accounts as $item)
                                    <option value="{{ $item->id }}">
                                        {{ $item->code . " - " . $item->name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-3">
                                <input name="description[]" type="text"
                                    class="form-control @error('description') is-invalid @enderror"
                                    placeholder="Write here the description ...">
                            </div>
                            <div class="col-3">
                                <input name="debit[]" type="number"
                                    class="form-control @error('debit') is-invalid @enderror debit_entry"
                                    placeholder="Credit amount ..." required>
                            </div>
                            <div class="col-3">
                                <input name="credit[]" type="number"
                                    class="form-control @error('credit') is-invalid @enderror credit_entry"
                                    placeholder="Debit amount ..." required>
                            </div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-3">
                                <select
                                    class="js-example-basic-single select2-hidden-accessible @error('name') is-invalid @enderror"
                                    name="name[]" required>
                                    <option selected>
                                        {{ __('basic.select account') }}
                                    </option>
                                    @foreach ($accounts as $item)
                                    <option value="{{ $item->id }}">
                                        {{ $item->code . " - " . $item->name }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-3">
                                <input name="description[]" type="text"
                                    class="form-control @error('description') is-invalid @enderror"
                                    placeholder="Write here the description ...">
                            </div>
                            <div class="col-3">
                                <input name="debit[]" type="number"
                                    class="form-control @error('debit') is-invalid @enderror debit_entry"
                                    placeholder="Credit amount ..." required>
                            </div>
                            <div class="col-3">
                                <input name="credit[]" type="number"
                                    class="form-control @error('credit') is-invalid @enderror credit_entry"
                                    placeholder="Debit amount ..." required>
                            </div>
                        </div>

                    </div>


                    <div class="my-3 text-end">
                        <div class="btn btn-user not_accepted-color-btn rounded-pill new_entry"><i
                                class="fas fa-plus"></i> {{
                            __('basic.new entry') }}
                        </div>
                    </div>

                    <div class="d-flex justify-content-center text-center">
                        <div class="main-color-bg text-center b-r-s-cont py-3 px-4 align-self-center me-3">
                            <h6 class="text-blue-300 text-xs mb-0"><i class="fas fa-dollar-sign"></i>
                                {{ __('basic.total debit') }}
                            </h6>
                            <p id="total_debit_show" class="text-white fs-4 fw-bold mb-0">0</p>
                        </div>
                        <div class="main-color-bg text-center b-r-s-cont py-3 px-4 align-self-center me-3">
                            <h6 class="text-blue-300 text-xs mb-0"><i class="fas fa-dollar-sign"></i>
                                {{ __('basic.total credit') }}
                            </h6>
                            <p id="total_credit_show" class="text-white fs-4 fw-bold mb-0">0</p>
                        </div>

                    </div>
                    <div id="entry_balance_error" class="text-center text-red" style="display: none">
                        {{ __('basic.entry amount is not balanced') }}</div>


                    <div class="d-flex justify-content-end mt-2 mb-2">
                        <input name="next" class="btn btn-primary action-button-next" id="send_form"
                            value="{{ __('basic.send') }}">
                    </div>
                </div>

            </div>
        </div>


    </form>


</div>

@endsection

<!-- js insert -->
@section('js')

<script>
    // new entry
    $(document).ready(function() {


        // add new entry item
        $(document).on("click", ".new_entry", function() {

            $('#new_entry_item_cont').append(

                '<div class="row mb-2">' +
                    '<div class="col-3">' +
                        '<select class="js-example-basic-single select2-hidden-accessible @error("name") is-invalid @enderror"  name="name[]" required>' +
                            '<option selected>' +
                                '{{ __("basic.select account") }}' +
                            '</option>' +
                            "@foreach ($accounts as $item)" +
                            '<option value="{{ $item->id }}">' +
                                '{{ $item->code . " - " . $item->name }}' +
                            '</option>'+
                            "@endforeach" +
                       '</select>' +
                    '</div>' +
                    '<div class="col-3">' +
                        '<input name="description[]" type="text" class="form-control @error('description') is-invalid @enderror" placeholder="Write here the description ...">' +
                    '</div>' +
                    '<div class="col-3">' +
                        '<input name="debit[]" type="number" class="form-control @error('debit') is-invalid @enderror" placeholder="Credit amount ..." required>' +
                    '</div>' +
                    '<div class="col-2">' +
                        '<input name="credit[]" type="number" class="form-control @error('credit') is-invalid @enderror" placeholder="Debit amount ..." required>' +
                   '</div>' +
                   '<div class="col-1 text-center"><h6 class="mb-0"><i class="fas fa-times text-red-200 clickable-item-pointer delete_entry"></i></h6></div>' +
                '</div>'
            )

            $('.js-example-basic-single').select2();
        });


        // delete entry item
        $(document).on("click", ".delete_entry", function() {
            $(this).parent().parent().parent().remove();
        });


        $(document).on("change", ".debit_entry", function(){
            $(this).parent().parent().find('.credit_entry').val('0')
        });

        $(document).on("change", ".credit_entry", function(){
            $(this).parent().parent().find('.debit_entry').val('0')
        });

        $(document).on("change", ".debit_entry, .credit_entry", function(){
            fetchTotals()
        });


        //fetch total debt and credit
        function fetchTotals() {

            // debit
            var debit = $('.debit_entry');
            var debit_total = 0;
            $.each(debit, function(key, value) {
                if(this.value > 0){
                    debit_total += parseFloat(this.value);
                }
            });
            var credit = $('.credit_entry');
            var credit_total = 0;
            $.each(credit, function(key, value) {
                if(this.value > 0){
                    credit_total += parseFloat(this.value);
                }
            });

            var total_debit = '#total_debit_show';
            var total_credit = '#total_credit_show';

            $(total_debit).html(debit_total);
            $(total_credit).html(credit_total);

            if(debit_total == credit_total){
                $('#entry_balance_error').hide();
            }else{
                $('#entry_balance_error').show();
            }
        }

    });

</script>



<!-- select 2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"
    integrity="sha512-4MvcHwcbqXKUHB6Lx3Zb5CEAVoE9u84qN+ZSMM6s7z8IeJriExrV3ND5zRze9mxNlABJ6k864P/Vl8m0Sd3DtQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function() {
            $('.js-example-basic-single').select2();
            //hide search
            $('.select2-no-search').select2({
                minimumResultsForSearch: -1
            });
        });
</script>

<!-- jquery ui datepicker -->
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script>
    $(function() {
            $('.hasdatetimepicker').datepicker({
                todayHighlight: true,
                format: "yyyy-mm-dd",
            }).on('change', function(){
                $('.datepicker').hide();
            });;
        });
</script>

<!-- validate jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
    integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    $(document).on("click", "#send_form", function(){

            var total_debit = $('#total_debit_show').html();
            var total_credit = $('#total_credit_show').html();

            if(total_debit == total_credit){


                 //for validation
                 $('#myform_entry').validate({ // initialize plugin within DOM ready

                });

                if (!$('#myform_entry').valid()) {
                    return false;
                }

                $("#myform_entry").submit();
            }else{
                $('#entry_balance_error').show();
            }
    });
</script>

@endsection