@extends('layouts.app')

{{-- Important Variables --}}

@php

$moduleName             = " Token Entry On Existing Sell";
$createItemName         = ucfirst($action) . $moduleName;
$breadcrumbMainName     = $moduleName;
$breadcrumbCurrentName  = ucfirst($action);
$breadcrumbMainIcon     = 'fas fa-industry';
$breadcrumbCurrentIcon  = 'add_box';
$parentButton           = 'Save';  
$parentRouteName        = 'sell';  
$formAction             = route('token.store_token_on_existing_sell');

@endphp

@section('title')
    {{ $moduleName }}->{{ $createItemName }}
@stop

@section('top-bar')
    @include('includes.top-bar')
@stop
@section('left-sidebar')
    @include('includes.left-sidebar')
@stop
@section('content')

    <section class="content">
        <div class="container-fluid">
            <div class="block-header pull-right">
                <a class="btn btn-sm btn-info waves-effect" href="{{ url()->previous() }}">{{ __('lang.back') }}</a>
            </div>

            @include('admin.partials.breadcrumbs')

            <!-- Inline Layout | With Floating Label -->
            <form class="form" id="form_validation" action="{{ $formAction }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="row clearfix">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="card">
                            <div class="header">
                                <h2>
                                    {{ $createItemName }}
                                </h2>
                                <br>

                                <div class="body">

                                    <div class="row clearfix">

                                        <input type="hidden" name="action" value="{{$action}}">
                                        

                                        @include('layouts.components.select_field', [
                                            'col'               => 4,
                                            'name'              => 'sell_id',
                                            'options'           => $sells->map(fn($sell) => [ 'id' => $sell->id, 'name' => $sell->registration_no]),
                                            'default_option'    => __('lang.select_sell'),
                                            'label'             => __('lang.sell'),
                                            'labelClass'        => 'required',
                                        ])

                                        @include('layouts.components.select_field', [
                                            'col'               => 4,
                                            'name'              => 'payment_type_id',
                                            'options'           => $payment_types,
                                            'default_option'    => __('lang.select_term'),
                                            'label'             => __('lang.token_term'),
                                        ])

                                    </div>

                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-24">
                                            <fieldset disabled="disabled">
                                                <legend class="addRowLegend"><span>{{__('lang.token_refund_details')}}</span>
                                                    <span>
                                                        <a href="javascript:void(0)"  onclick="addRefundRow();">
                                                            <i class="pointer-cursor material-icons text-success plus addRowIcon">add_circle_outline</i>
                                                        </a>
                                                    </span>
                                                </legend>
                                            </fieldset>
                                        </div>
                                    </div>
                                    
                                    <div id="refund_detail_div">
                                        
                                    </div>

                                    <div class="row clearfix">
                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <div class="form-line">
                                                <button type="submit" class="btn btn-primary m-t-15 waves-effect">{{ $parentButton }}</button>
                                                <a class="btn m-t-15 btn-default waves-effect" href="{{ url()->previous() }}">{{ __('lang.back') }}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- #END# Inline Layout | With Floating Label -->
                </div>
            </form>
        </div>
    </section>

@stop

@push('include-css')
    <!-- Colorpicker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css') }}" rel="stylesheet" />

    <!-- Dropzone Css -->
    <link href="{{ loadAsset('asset/plugins/dropzone/dropzone.css') }}" rel="stylesheet">

    <!-- Multi Select Css -->
    <link href="{{ loadAsset('asset/plugins/multi-select/css/multi-select.css') }}" rel="stylesheet">

    <!-- Bootstrap Spinner Css -->
    <link href="{{ loadAsset('asset/plugins/jquery-spinner/css/bootstrap-spinner.css') }}" rel="stylesheet">

    <!-- Bootstrap Tagsinput Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}" rel="stylesheet">

    <!-- Bootstrap Select Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-select/css/bootstrap-select.css') }}" rel="stylesheet" />



    <!-- Bootstrap Material Datetime Picker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') }}"
        rel="stylesheet" />

    <!-- Bootstrap DatePicker Css -->
    <link href="{{ loadAsset('asset/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css') }}" rel="stylesheet" />


    <!-- noUISlider Css -->
    <link href="{{ loadAsset('asset/plugins/nouislider/nouislider.min.css') }}" rel="stylesheet" />

    <!-- Sweet Alert Css -->
    <link href="{{ loadAsset('asset/plugins/sweetalert/sweetalert.css') }}" rel="stylesheet" />
@endpush

@push('include-js')
    <!-- Moment Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/momentjs/moment.js') }}"></script>

    <!-- Bootstrap Material Datetime Picker Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}">
    </script>

    <!-- Bootstrap Datepicker Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js') }}"></script>


    <!-- Sweet Alert Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/sweetalert/sweetalert.min.js') }}"></script>


    <!-- Autosize Plugin Js -->
    <script src="{{ loadAsset('asset/plugins/autosize/autosize.js') }}"></script>

    <script src="{{ loadAsset('asset/js/pages/forms/basic-form-elements.js') }}"></script>

    <script src="{{ loadAsset('asset/js/custom/validation.js')}}"></script>

    <script>
        @if (Session::has('success'))
            toastr["success"]('{{ Session::get('success') }}');
        @endif

        @if (Session::has('error'))
            toastr["error"]('{{ Session::get('error') }}');
        @endif

        @if ($errors->any())
            @foreach ($errors->all() as $error)
                toastr["error"]('{{ $error }}');
            @endforeach
        @endif

        let customers           = @json($customers);
        let payment_types       = @json($payment_types);
        let get_accounts_ajax   = "{{ route('actual_received.mode.change') }}";

    </script>
    <script>

        function addRefundRow(){
            $('#refund_detail_div').append(refund_row());
            $('select').selectpicker('refresh');
            setDatePicker();
        }

        function refund_row(){

            let id_row                  = generateUniqueId()+'a';
            let name_prefix             = `refund_items[${id_row}]`;
            let customers_options       = getCustomerOptions();
            let payment_types_options   = getPaymentTypeOptions();
            let mode_of_payment_options = getModeOfPaymentOptions();

            let row =`

            <div class="refund_row">

                <div class="row">

                    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-3">
                        <div class="form-group form-float">
                            <div class="form-line focused">
                                <input name="${name_prefix}[receipt_date]" type="text"  class="form-control date_field" value="" readonly >
                                <label class="form-label">Token Date</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-3"> 
                        <div class="form-group form-float">
                            <div class="form-line focused">
                                <select class="form-control show-tick" name="${name_prefix}[refund_payment_type_id]" data-live-search="true">
                                    ${payment_types_options}
                                </select>
                                <label class="form-label">Term</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-3"> 
                        <div class="form-group form-float">
                            <div class="form-line focused">
                                <select class="form-control show-tick mode_of_payment" name="${name_prefix}[mode_of_payment]" data-live-search="true" onChange="getMopHeads(this) , setRowChequeNumberFields(this)">
                                    ${mode_of_payment_options}
                                </select>
                                <label class="form-label">Mode of Payment</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-3"> 
                        <div class="form-group form-float">
                            <div class="form-line focused">
                                <select class="form-control show-tick bank_id" name="${name_prefix}[bank_id]" data-live-search="true">
                                    <option value="0">Select Bank</option>
                                </select>
                                <label class="form-label">Account</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 row_bank_field">
                        <div class="form-group form-float">
                            <div class="form-line focused">
                                <input name="${name_prefix}[cheque_number]" type="text"  class="form-control instrument_number" value="" >
                                <label class="form-label">Instrument Number</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12 row_bank_field">
                        <div class="form-group form-float">
                            <div class="form-line focused">
                                <input name="${name_prefix}[cheque_date]" type="text"  class="form-control instrument_date date_field" value="" readonly >
                                <label class="form-label">Instrument Date</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-3">
                        <div class="form-group form-float">
                            <div class="form-line focused">
                                <input name="${name_prefix}[refund_date]" type="text"  class="form-control date_field" value="" readonly >
                                <label class="form-label">Refund Date</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-3"> 
                        <div class="form-group form-float">
                            <div class="form-line focused">
                                <select class="form-control show-tick" name="${name_prefix}[customer_id]" data-live-search="true">
                                    ${customers_options}
                                </select>
                                <label class="form-label">Customer</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12" >
                        <div class="form-group form-float">
                            <div class="form-line focused" >
                                <input value="" name="${name_prefix}[refund_description]" type="text" class="form-control">
                                <label class="form-label">${_lang('lang.refund_description')}</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12" >
                        <div class="form-group form-float">
                            <div class="form-line focused" >
                                <input value="" name="${name_prefix}[references]" type="text" class="form-control">
                                <label class="form-label">${_lang('lang.reference_no')}</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12" >
                        <div class="form-group form-float">
                            <div class="form-line focused" >
                                <input value="" name="${name_prefix}[amount]" type="number" class="form-control amount">
                                <label class="form-label">${_lang('lang.amount')}</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-2" >
                        <a href="javascript:void(0)" onclick="removeRow(this);"><i class="pointer-cursor material-icons text-danger minus addRowIcon">remove_circle_outline</i></a>
                    </div>
                </div>

                <hr>
                <br>
            </div>
            `;

            return row;
        }

        function removeRow(element){
            $(element).closest('.refund_row').fadeOut(300,function(){
                $(this).remove();
            });
        }

        function getCustomerOptions(){

            let options = `<option value="">Select Customer</option>`;

            $.each(customers,function(index,customer){
                options += `<option value="${customer.id}">${customer.name}</option>`
            })

            return options;
        }

        function getPaymentTypeOptions(){

            let options = `<option value="">Select Term</option>`;

            $.each(payment_types,function(index,payment_type){
                options += `<option value="${payment_type.id}">${payment_type.name}</option>`
            })

            return options;
        }

        function getMopHeads(element , bank_id = null) {
            
            let parent_row  = $(element).closest('.refund_row');
            let mode        = parent_row.find('select[name*="[mode_of_payment]"]').val();
            let bankIdField = parent_row.find('select[name*="[bank_id]"]');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: get_accounts_ajax,
                data: { mode: mode },
                success: function (data) {

                    bankIdField.empty();

                    let option = `<option value="0">Select ${mode}</option>`;

                    if (data && Object.keys(data).length > 0) {
                        $.each(data, function (value, index) {
                            let selected = (bank_id == index.id) ? 'selected': '';
                            option += `<option ${selected} value="${index.id}">${index.name} (${index.reference_type.toUpperCase()})</option>`;
                        });
                    } 
                    else {
                        option += `<option> No Head Found </option>`;
                    }

                    bankIdField.html(option);
                    bankIdField.selectpicker('refresh');
                    
                }
            });
        }

        function setDatePicker(){
            $('.date_field').datepicker({format: 'dd/mm/yyyy', autoclose: true , todayHighlight: true});
        }

        function setRowChequeNumberFields(element){

            let parent_row      = $(element).closest('.refund_row');
            let mode_of_payment = parent_row.find('.mode_of_payment').find(':selected').data('type'); 
            let cheque_fields   = parent_row.find('.row_bank_field');

            cheque_fields.show();

            if(mode_of_payment == 'Cash'){
                cheque_fields.hide();``
            }
        }


    </script>
@endpush