@extends('layouts.main') 

@push('styles')
    <link href="{{ asset('elite/bower_components/typeahead.js-master/dist/typehead-min.css') }}" rel="stylesheet">
    <link href="{{ asset('elite/bower_components/select2/select2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
@endpush

@section('content')
<div class="row bg-title">
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title">{{ __('family_accounts.create_family_account') }}</h4>
    </div>
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
        <ol class="breadcrumb">
            <li><a href="{{ route('home') }}"><i class="fa fa-home"></i> {{ __('family_accounts.home') }}</a></li>
            <li><a href="{{ route('finance') }}"><i class="fa fa-money"></i> {{ __('family_accounts.finance_home') }}</a></li>
            <li class="active"><i class="fa fa-eye"></i> {{ __('family_accounts.create_family_account') }}</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        @include('patient_discounts::family_accounts.menu')
    </div>
</div>

<div class="white-box">
    @include('flash::message')
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="row">
        <div class="col-md-6">

            {{ Form::open(['method'=>'post','route'=>'family_accounts.store', 'id' => 'family_account_form']) }}

            <div class="form-group">
                {{ Form::label('family_head', __('family_accounts.family_head')) }}
                <select class="patient_name form-control" name="family_head" id="family_head_name"></select>
            </div>

            <div class="form-group">
                {{ Form::label('family_members',__('family_accounts.family_members')) }}
                <select class="patient_name form-control" name="family_members[]" id="patient_name" multiple="true"></select>
            </div>

            <div class="form-group">
                {{ Form::label('deposit_amount', __('family_accounts.amount_deposited')) }}
                {{ Form::number('deposit_amount',0,['class' => 'form-control', 'id' => 'deposit_amount']) }}
                <div class="help-block with-errors"></div>
            </div>

            <div class="form-group" id="initial_div" style="display: none;">
                <div class="alert alert-info">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <span>Is this amount part of the opening family account amounts on Stre@mline. This will affect Equity in case it is</span>
                </div>
                {{ Form::label('is_it_opening_family_amount', 'Is it the opening balance on Stre@mline for this family') }}
                {{ Form::select('is_it_opening_family_amount', [0 => 'No', 1 => 'Yes'], null, ['class' => 'form-control compulsory','required', 'id' => 'is_it_opening_amt']) }}
                <br>

                <div class="form-group" id="opening_account_div" style="display: none;">
                    {{ Form::label('opening_account_id', 'Opening Account') }}
                    {{ Form::select('opening_account_id', $chart_of_accounts, null, ['class' => 'form-control']) }}
                    <div class="help-block with-errors"></div>
                </div>

                <div class="input-group" id="opening_date_div" style="display: none;">
                    <input type="text" name="opening_amount_date" placeholder="Opening amount deposit date" class="form-control col-sm-12" autocomplete="off" id="opening_amount_date">
                    <span class="input-group-addon"><i class="icon-calender"></i></span>
                </div>
            </div>

            <div class="form-group">
                {{ Form::label('deposited_by', __('family_accounts.deposited_by')) }}
                {{ Form::text('deposited_by', '', ['class'=>'form-control', 'id'=>'deposit_by']) }}
            </div>

            @if (Auth::user()->can('add-family-account-credit-limit'))
                <div class="form-group">
                    {{ Form::label('credit_limit', __('family_accounts.credit_limit')) }}
                    {{ Form::number('credit_limit',0,['class' => 'form-control']) }}
                    <div class="help-block with-errors"></div>
                </div>
            @endif

            <div>
                {{ Form::submit(__('family_accounts.save'),['class'=>'btn btn-success', 'id' => 'submitBtn'])}}
                {{ Form::reset(__('family_accounts.cancel'),['type'=>'reset','class'=>'btn btn-default'])}}
            </div>

            {{ Form::close() }}
        </div>
    </div>
</div>
@endsection 
@push('scripts')
    <script src="{{ asset('elite/bower_components/select2/select2.min.js') }}"></script>
    <script src="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.family_dropdown').select2({
                placeholder: "Select member"
            });

            $('.select2-selection.select2-selection--single').css('height','calc(3.85rem)');
            $('.select2-selection.select2-selection--single').css('padding-top','5px');
            $('.select2-selection.select2-selection--single').css('border-left', '3px solid #F08080');/*add compulsory class*/
            $('.select2-selection.select2-selection--single.sec_d').css('border-left', '3px solid #aaa');
            $('.select2-selection__arrow').css('top','3px');

            $('#deposit_amount').change(function(e) {
                //if ($('#deposit_amount').val() > 0) {
                    $('#initial_div').show();
                //}
            });

            $('#is_it_opening_amt').click(function(e){
                var outcome = $("#is_it_opening_amt :selected").val();
                if (outcome == 1) { //1=yes
                    $('#opening_account_div').show();
                    $('#opening_date_div').show();
                    $('#opening_account_id').attr("required", "true");
                }
                else{
                    $('#opening_account_div').hide();
                    $('#opening_date_div').hide();
                    $('#opening_account_id').removeAttr("required");
                }
            });

            $('.patient_name').select2({
                placeholder: "Search name",
                ajax: {
                    url: '/search_family_account_name',
                    dataType: 'json',
                    delay: 250,
                    processResults: function (data) {
                        return {
                            results:  $.map(data, function (item) {
                                return {
                                    text: item.first_name + " " + item.last_name+ " - " + item.number+ " (" + item.phone + ")",
                                    id: item.id
                                }
                            })
                        };
                    },
                    cache: true
                }
            });

            $('#opening_amount_date').datepicker({
                autoclose: true,
                todayHighlight: true,
                format: 'yyyy-mm-dd',
            });

            $('#submitBtn').click(function(e){
                let deposit_amount = $('#deposit_amount').val();
                let is_it_opening_balance = $('#is_it_opening_amt :selected').val();
                if((deposit_amount < 0) && is_it_opening_balance == 0){
                    alert('Deposited amount can not be negative if it is not the opening balance of the family');
                    e.preventDefault();
                }
            });
        });
    </script>
@endpush