@extends ('backend.layouts.app')

@section ('title', __('point::labels.backend.point.management') . ' | ' . __('point::labels.backend.point.edit'))

@section('breadcrumb-links')
    @include('point::includes.breadcrumb-links')
@endsection

@push('after-styles')
    {{ style("assets/plugins/select2/css/select2.min.css") }}
    {{ style("assets/plugins/select2/css/select2-bootstrap.min.css") }}
    {{ style('assets/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}
    <style>

        select {
            width: 100%;
        }
        
    </style>
@endpush

@section('content')
{{ html()->modelForm($point, 'PATCH', route('admin.point.update', $point->id))->class('form-horizontal')->open() }}
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-5">
                    <h4 class="card-title mb-0">
                        {{ __('point::labels.backend.point.management') }}
                        <small class="text-muted">{{ __('point::labels.backend.point.edit') }}</small>
                    </h4>
                </div><!--col-->
            </div><!--row-->

            <hr />

            <div class="row mt-4 mb-4">
                <div class="col">

                    <div class="form-group row">
                    {{ html()->hidden('mode')->class('col-md-2 form-control-label')->id('mode') }}
                    {{ html()->label(__('point::labels.backend.point.table.customer'))->class('col-md-2 form-control-label')->for('customer') }}

                        <div class="col-md-10">
                            {{ html()->select('customer_id', $customers)
                                ->class('form-control select2-single')
                                ->placeholder(__('point::labels.backend.point.table.customer'))
                                ->attribute('maxlength', 191)
                                ->required() }}
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                    {{ html()->label(__('point::labels.backend.point.table.point'))->class('col-md-2 form-control-label')->for('point') }}

                        <div class="col-md-10">
                            {{ html()->text('point')
                                ->class('form-control')
                                ->placeholder(__('point::labels.backend.point.table.point'))
                                ->attribute('maxlength', 191)
                                ->required() }}
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                    {{ html()->label(__('point::labels.backend.point.payment_date_time'))->class('col-md-2 form-control-label')->for('payment_date_time') }}

                        <div class="col-md-10">
                            {{ html()->text('payment_date_time')
                                ->class('form-control payment_date_time')
                                ->placeholder(__('point::labels.backend.point.payment_date_time'))
                                ->attribute('maxlength', 191)
                                ->required() }}
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                    {{ html()->label(__('point::labels.backend.point.table.remark'))->class('col-md-2 form-control-label')->for('remark') }}

                        <div class="col-md-10">
                            {{ html()->textarea('remark')
                                ->class('form-control')
                                ->placeholder(__('point::labels.backend.point.table.remark'))
                                ->required() }}
                        </div><!--col-->
                    </div><!--form-group-->
                    <div class="form-group row">
                        {!! html()->label(__('point::labels.backend.point.table.payment_mode'))->class('col-md-2 form-control-label')->for('payment_mode') !!}
                        <div class="col-md-10">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    {{-- <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a> --}}
                                    <a role="tab" href="#cash" data-toggle="tab" class="nav-link @if (!old('mode')) active @endif">{{ __('point::labels.backend.point.table.cash') }}</a>
                                </li>
                                <li class="nav-item">
                                    <a role="tab" href="#cheque" data-toggle="tab" class="nav-link @if ( old('mode') == 1) active @endif">{{ __('point::labels.backend.point.table.cheque') }}</a>
                                </li>
                                <li class="nav-item">
                                    <a role="tab" href="#other" data-toggle="tab" class="nav-link">{{ __('point::labels.backend.point.table.bank_transfer') }}</a>
                                </li>
                           </ul>
                           <div class="tab-content">
                            <div class="tab-pane fade in @if (! old('mode')) active @endif" id="cash">
                                <p>The payment has been made by Cash....</p>
                            </div>

                            <div class="tab-pane fade in @if ( old('mode') ==1 ) active @endif" id="cheque">
                                <input type="checkbox" name="cheque" class="change_payment" id="chk-checque" value="1" {{ ( old('mode') ==1 )?'checked':'' }} > <label
                                for="chk-checque"> {{ __('point::labels.backend.point.click_to_fill_info') }} </label>
                                <p>
                                    <input type="text" class="form-control"
                                    placeholder="{{ __('point::labels.backend.point.bank_name') }}"
                                    name="bank_name" {{ ( old('mode') ==1 )?'':'disabled="disabled"' }} >
                                    @foreach($errors->get('bank_name') as $error)
                                    <span class="help-inline"> {{ $error }}</span>
                                    @endforeach
                                </p>
                                <p>
                                    <input type="text" class="form-control"
                                    placeholder="{{ __('point::labels.backend.point.branch_name') }}"
                                    name="branch_name" {{ ( old('mode') ==1 )?'':'disabled="disabled"' }} >
                                    @foreach($errors->get('branch_name') as $error)
                                    <span class="help-inline"> {{ $error }}</span>
                                    @endforeach
                                </p>
                                <p>
                                    <input type="text" class="form-control  date date-picker" date-date-format = "yyyy-mm-dd"
                                    placeholder="{{ __('point::labels.backend.point.cheque_dd_date') }}"
                                    name="cheque_date" {{ ( old('mode') ==1 )?'':'disabled="disabled"' }} >
                                    @foreach($errors->get('cheque_date') as $error)
                                    <span class="help-inline"> {{ $error }}</span>
                                    @endforeach
                                </p>
                                <p>
                                    <input type="text" class="form-control"
                                    placeholder="{{ __('point::labels.backend.point.cheque_dd_no') }}"
                                    name="cheque_no" {{ ( old('mode') ==1 )?'':'disabled="disabled"' }} >
                                    @foreach($errors->get('cheque_no') as $error)
                                    <span class="help-inline"> {{ $error }}</span>
                                    @endforeach
                                </p>
                                <p>
                                    <input type="text" class="form-control  date date-picker"  date-date-format = "yyyy-mm-dd"
                                    placeholder="{{ __('point::labels.backend.point.cheque_issue_date') }}"
                                    name="cheque_issue_date" {{ ( old('mode') ==1 )?'':'disabled="disabled"' }}>
                                    @foreach($errors->get('cheque_issue_date') as $error)
                                    <span class="help-inline"> {{ $error }}</span>
                                    @endforeach
                                </p>
                            </div>

                            <div class="tab-pane fade in @if ( old('mode') == 2) active @endif " id="other">
                                <input type="checkbox" name="transfer" class=" change_payment" id="chk-transfer" value="2" {{ ( old('mode') ==2 )?'checked':'' }}>
                                <label for="chk-transfer"> {{ __('point::labels.backend.point.click_to_fill_info') }} </label>
                                <p>
                                    <input type="text" class="form-control" placeholder="{{ __('point::labels.backend.point.bank_name') }}"
                                    name="bank_name" {{ ( old('mode') ==2 )?'':'disabled="disabled"' }} >
                                    @foreach($errors->get('bank_name') as $error)
                                    <span class="help-inline"> {{ $error }}</span>
                                    @endforeach
                                </p>
                                <p>
                                    <input type="text" class="form-control" placeholder="{{ __('point::labels.backend.point.acc_type') }}"
                                    name="acc_type" {{ ( old('mode') ==2 )?'':'disabled="disabled"' }} >
                                    @foreach($errors->get('acc_type') as $error)
                                    <span class="help-inline"> {{ $error }}</span>
                                    @endforeach
                                </p>
                                <p>
                                    <input type="text" class="form-control" placeholder="{{ __('point::labels.backend.point.acc_no') }}"
                                    name="acc_no" {{ ( old('mode') ==2 )?'':'disabled="disabled"' }} >
                                    @foreach($errors->get('acc_no') as $error)
                                    <span class="help-inline"> {{ $error }}</span>
                                    @endforeach
                                </p>
                                <p>
                                    <input type="text" class="form-control" placeholder="{{ __('point::labels.backend.point.tran_recip_no') }}"
                                    name="receipt_no" {{ ( old('mode') ==2 )?'':'disabled="disabled"' }} >
                                    @foreach($errors->get('receipt_no') as $error)
                                    <span class="help-inline"> {{ $error }}</span>
                                    @endforeach
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                </div><!--col-->
            </div><!--row-->
        </div><!--card-body-->

        <div class="card-footer">
            <div class="row">
                <div class="col">
                    {{ form_cancel(route('admin.point.index'), __('buttons.general.cancel')) }}
                </div><!--col-->

                <div class="col text-right">
                    {{ form_submit(__('buttons.general.crud.update')) }}
                </div><!--row-->
            </div><!--row-->
        </div><!--card-footer-->
    </div><!--card-->
{{ html()->closeModelForm() }}
@endsection

@push('after-scripts')
{{ script("assets/plugins/select2/js/select2.full.min.js") }}
{{ script('assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js')}}
<script>
    $(document).ready(function() {
        $('.select2-single').select2();

        $('.payment_date_time').datetimepicker({
            autoclose: true
        });

        $.fn.clickToggle = function(func1, func2) {
            var funcs = [func1, func2];
            this.data('toggleclicked', 0);
            this.click(function() {
                var data = $(this).data();
                var tc = data.toggleclicked;
                $.proxy(funcs[tc], this)();
                data.toggleclicked = (tc + 1) % 2;
            });
            return this;
        };

        $('.change_payment').clickToggle(function() {
            $(this).attr('checked', 'checked');
            var mode = $(this).val();
            $("#mode").val(mode);
            $(this).closest('.tab-pane').find('input[type=text]').removeAttr('disabled');
        }, function() {
            $(this).removeAttr('checked');
            $("#mode").val('');
            $(this).closest('.tab-pane').find('input[type=text]').attr('disabled', 'disabled');
        });
    })
</script>
@endpush