@extends('layouts/microfin_layout')
@section('title', '| Add Ledger Config')
@section('content')
<style type="text/css">
    #rootwizard,
    #rootwizard .form-control {
        font-size: 11px !important;
        padding: 5px !important;
    }

    .form-control {
        font-size: 11px !important;
        color: #555 !important;
    }

    form .form-group.validate-has-error .form-control+span {
        font-size: 11px;
        color: #FF0000;
    }

    form .form-group.validate-has-error .form-control {
        border-color: rgba(104, 184, 40, 0.5);
    }

    label {
        font-size: 11px !important;
        font-weight: 400 !important;
        color: #555 !important;
    }

    select[multiple] {
        height: 194px;
    }

    .error {
        color: red;
    }

    input[type="checkbox"][readonly] {
        pointer-events: none;
    }

</style>
<div class="row add-data-form">
    <div class="col-md-12">
        <div class="col-md-10 col-md-offset-1 fullbody">
            <div class="viewTitle" style="border-bottom:1px solid white;">
                <a href="{{ route('listPaymentLedgerConfig') }}" class="btn btn-info pull-right addViewBtn">
                    <i class="glyphicon glyphicon-th-list viewIcon"></i>
                    Ledger Config Lists
                </a>
            </div>
            <div class="panel panel-default panel-border">
                <div class="panel-heading">
                    <div class="panel-title">New Ledger Config</div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">

                            <form action="{{route('storePaymentLedgerConfig')}}" method="POST"
                                class="form-horizontal form-groups validate">
                                @csrf

                                <div class="form-group">
                                    <label for="exampleFormControlInput1" class="col-sm-3 control-label">Branch</label>
                                    <div class="col-sm-9">
                                        <select name="branch" class="form-control" id="exampleFormControlSelect1">
                                            <option selected value="select">Select</option>
                                            @foreach ($data['branchList'] as $key => $branch)
                                            <option value="{{$key}}">{{$branch}}</option>
                                            @endforeach
                                        </select>
                                        @error('branch')
                                        <span style="color: #FF0000">{{$message}}</span>
                                        @enderror
                                    </div>

                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Effective Date</label>
                                    <div class="col-sm-9">
                                        <input name="efficativeDate" type="text" class="form-control"
                                            placeholder="Efficative date" readonly id="datepicker">
                                        @error('efficativeDate')
                                        <span style="color: #FF0000">{{$message}}</span>
                                        @enderror
                                    </div>

                                </div>
                                @foreach ($data['paymentType'] as $type)
                                    <div class="" style="background-color: beige; padding:0.2rem;">
                                        <div align="center">
                                            <div style="color: black">
                                                <h4>{{$type->name}}</h4>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group" style="padding-top: 5px;">
                                        <label class="col-sm-3 control-label">DisburseMent Ledger</label>
                                        <div class="col-sm-9">
                                            <input name="paymentType{{$type->id}}" type="hidden" value="{{$type->type}}">

                                            <select name="disburseMentLedger{{$type->id}}" class="form-control"
                                                id="disbursementLedger" data-live-search="true">
                                                <option value=" ">Select</option>
                                                @foreach ($data['ledgerIds'] as $key=>$leaderId)
                                                <option value="{{$key}}">{{$leaderId}}</option>
                                                @endforeach
                                            </select>
                                            @error('disburseMentLedger')
                                            <span style="color: #FF0000">{{$message}}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">Collection Ledger</label>
                                        <div class="col-sm-9">
                                            {{-- <input name="paymentType{{$type->id}}" type="hidden" value="{{$type->id}}"> --}}

                                            <select name="collectionLedger{{$type->id}}" class="form-control"
                                                id="exampleFormControlSelect1">
                                                <option value=" ">Select</option>
                                                @foreach ($data['ledgerIds'] as $key=>$leaderId)
                                                <option value="{{$key}}">{{$leaderId}}</option>
                                                @endforeach
                                            </select>
                                            @error('collectionLedger')
                                            <span style="color: #FF0000">{{$message}}</span>
                                            @enderror
                                        </div>

                                    </div>
                                @endforeach
                                <button type="submit" class="btn btn-info">Save</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js" integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css" integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous" />

<script>
    $(document).ready(function () {
        $( function() {
            $( "#datepicker" ).datepicker();
        });

        $('select').selectize({
            sortField: 'number'
        });
    });
</script>

@endsection