@extends('admin.layouts.master')

@section('title')
    Cash Advance
@stop

@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" type="text/css" href="{{asset('/css/jsteps/normalize.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('/css/jsteps/jquery.steps.css')}}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />

    <style>
        .select2{
                width: 100% !important;
            }
        .select2-container, .select2-dropdown, .select2-search, .select2-results {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -ms-transition: none !important;
        -o-transition: none !important;
        transition: none !important;
        }
    </style>

@stop

@section('content')
<div class="content-wrapper" >
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <span class="fa fa-user-plus"></span> New Cash Advance
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-user-plus"></i> Admin Panel</a></li>
                <li class="active">New Cash Advance</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content" style=" padding-bottom: 10%;">
            <div class="page-header">
                <a href="{{route('advances')}}" class="btn btn-primary"><i class="fa fa-backward"></i> Back</a>
            </div>
            <form method="post" action="{{route('advances.new')}}">
                {{--<input type="hidden" name="agent_id" id="agent_id" class="form-control" value="" readonly>--}}
                <div class="col-md-6">
                    <div class="form-group has-feedback @if($errors->has('ca_date')) has-error @endif">
                        <label for="ca_date" class="control-label">Cash Advance Date:</label>
                        <div class='input-group date datetimepicker1' id='datetimepicker1'>
                            <input type='text' class="form-control" id="ca_date" name="ca_date"  />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                        @if($errors->has('ca_date')) <span class="help-block">{{$errors->first('ca_date')}}</span> @endif
                    </div>

                    <div class="form-group has-feedback @if($errors->has('amount')) has-error @endif">
                        <label for="amount" class="control-label">Cash Amount</label>
                        <input type="number" name="amount" id="amount" class="form-control" value="" style="text-align: right;">
                        <span class="glyphicon glyphicon-book form-control-feedback"></span>
                        @if($errors->has('amount')) <span class="help-block">{{$errors->first('amount')}}</span> @endif
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group has-feedback @if($errors->has('agent_id')) has-error @endif">
                        <label for="agent_id" class="control-label">Agent</label>
                        <select name="agent_id" id="agent_id" class="form-control">
                            <option value="">Select Agent</option>
                            @foreach($agents as $agent)
                                <option value="{{$agent->id}}">{{$agent->fullname}}</option>
                            @endforeach
                        </select>
                        @if($errors->has('agent_id')) <span class="help-block">{{$errors->first('agent_id')}}</span> @endif
                    </div>

                    <div class="form-group has-feedback @if($errors->has('remarks')) has-error @endif">
                        <label for="remarks" class="control-label">Remarks</label>
                        <textarea class="form-control txt" rows="5" name="remarks" id="remarks" placeholder=""></textarea>
                        @if($errors->has('remarks')) <span class="help-block">{{$errors->first('remarks')}}</span> @endif
                    </div>

                </div>

                <div class="form-group" style="padding: 10px;">
                    <button type="submit" class="btn btn-success btn-s"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save Entry</button>
                </div>
                {{csrf_field()}}
            </form>

        </section>
        @if(Session('info'))
            <div class="row">
            <div class="col-md-6 col-md-offset-3 text-center">
            <div class="tem alert alert-success navbar-fixed-bottom"><span class="glyphicon glyphicon-ok-circle"></span> {{Session('info')}}</div>
            </div>
            </div>
        @endif
</div>
@stop

@section('script')

    {{--<script type="text/javascript" src="{{ asset('js/invoice.js') }}" ></script>--}}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function () {
        $('#agent_id').select2();
        $('#datetimepicker1').datetimepicker({
             format: 'MM/DD/YYYY'
        });

        $('.datetimepicker1').datetimepicker({
            format: 'MM/DD/YYYY'
        });
    });
</script>

@stop