@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<style>
    .panel-heading {
        background-color: #f1f1f1;
        border: 1px solid #e0dfe0;
        padding-left: 10px;
        padding-top: 6px;
        cursor: pointer;
    }
    .panel-default{
        padding-bottom: 4px;
    }
    .panel-collapse{
        background-color: #ffffff;
        padding: 10px;
        border: 1px solid #dedada;
    }
</style>
<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    Auto Document Rules
                </h3>
            </div>

        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content">
        @if(Session::has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('success') }}
            </div>
        @endif
        @if(Session::has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('error') }}
            </div>
        @endif
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon">
                            <i class="fa fa-object-ungroup"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            Auto Document Rules
                        </h3>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body">
                <div class="m-section">
                    <div class="m-section__content">
                        <form class="m-form m-form--fit m-form--label-align-right" action="javascript:void(0);" method="POST" enctype="multipart/form-data" data-id="{!! $document_set->id or 0 !!}">
                            <input type="hidden" name="_token" value="{!! csrf_token() !!}" />
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="col-md-12" style="margin-left: -45px;">
                                        <div class="form-group m-form__group row">
                                            <label class="col-lg-6 col-form-label">
                                                Document Set Name
                                            </label>
                                            <div class="col-lg-6">
                                                <input type="text" value="{!! $document_set->name or '' !!}" @if(isset($document_set) && $document_set->name) readonly disabled="disabled" @endif placeholder="Enter Document Set Name. ex. A" class="form-control" name="document_set_name" required/>
                                            </div>
                                        </div>
                                        <div class="form-group m-form__group row">
                                            <label class="col-lg-6 col-form-label">
                                                Choose Employment Type:
                                            </label>
                                            <div class="col-lg-6">
                                                <select class="form-control" name="employment_type" required>
                                                    <option value="">Select Type</option>
                                                    <option value="salaried" @if(isset($document_set) && $document_set->employment_type == 'salaried') selected="selected" @endif>Salaried</option>
                                                    <option value="self_employed" @if(isset($document_set) && $document_set->employment_type == 'self_employed') selected="selected" @endif>Self Employed</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group m-form__group row choose_document_type_div" @if(!isset($document_set)) style="display: none;" @endif>
                                            <label class="col-lg-6 col-form-label">
                                                Choose Document Type:
                                            </label>
                                            <div class="col-lg-6">
                                                <select class="form-control selectpicker" name="document_type" data-style="btn-default" multiple data-max-options="7"  required>
                                                    <option @if(isset($document_set) && strpos($document_set->document_type, 'id_proof') !== false) selected="selected" @endif value="id_proof">ID Proof</option>
                                                    <option @if(isset($document_set) && strpos($document_set->document_type, 'address_proof') !== false) selected="selected" @endif value="address_proof">Address Proof</option>
                                                    <option @if(isset($document_set) && strpos($document_set->document_type, 'income_proof') !== false) selected="selected" @endif value="income_proof">Income Proof</option>
                                                    <option @if(isset($document_set) && strpos($document_set->document_type, 'banking') !== false) selected="selected" @endif value="banking">Banking</option>
                                                    @if(isset($document_set) && $document_set->employment_type == 'self_employed')
                                                    <option @if(isset($document_set) && strpos($document_set->document_type, 'business_proof') !== false) selected="selected" @endif value="business_proof">Business Proof</option>
                                                    @endif
                                                    <option @if(isset($document_set) && strpos($document_set->document_type, 'co_applicant') !== false) selected="selected" @endif value="co_applicant">Co-applicant</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="padding-top: 24px;">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <td>Name</td>
                                        <td>Optional</td>
                                        <td>Mandatory</td>
                                        <td>Group</td>
                                    </tr>
                                    </thead>
                                    <tbody class="document-table-list">
                                    @if(isset($document_set))
                                        <?php $documents = json_decode($document_set->documents); ?>
                                        @foreach($documents as $index=>$set)
                                            <?php $mandatory = $set->mandatory == 'true' ? 'checked=checked' : '';
                                                  $optional = $set->optional == 'true' ? 'checked=checked' : '';
                                                  $d_set = $set->group > 0 ? 'value="'.$set->group.'"' : ''; ?>
                                            <?php echo "<tr><td>".$set->id."</td><td><input type='checkbox' $optional class='form-control ".str_replace(' ','_',$set->id).'_OP'."' data-name-f=".str_replace(' ','_',$set->id)." data-name='OP' data-id=".$index." name='$set->id'/></td><td><input type='checkbox' $mandatory class='form-control ".str_replace(' ','_',$set->id).'_MA'."' data-name-f=".str_replace(' ','_',$set->id)." data-name='MA' data-id=".$index." name='$set->id'/></td><td><input type='number' min='1' data-id=".$index." placeholder='Group Number' $d_set class='form-control' name='doc'/></td></tr>"; ?>
                                        @endforeach
                                    @endif
                                    </tbody>
                                </table>
                            </div>
                            <div class="m-portlet__foot m-portlet__foot--fit">
                                <div class="m-form__actions m-form__actions">
                                    <button class="btn btn-primary save_button_list_div">
                                        @if(isset($document_set->id))
                                            Update
                                            @else
                                            Save
                                        @endif
                                    </button>
                                    <button type="reset" onclick="window.history.back()" class="btn btn-secondary">
                                        Cancel
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        @if(isset($documentations) && count($documentations) > 0)
                        <div>Existing Documents Set</div>
                        <table class="table">
                            <tr>
                                <th>Name</th>
                                <th>Employment Type</th>
                                <th>Document Type</th>
                                <th>Action</th>
                            </tr>
                        @foreach($documentations as $document)
                        <tr>
                            <td>{!! $document->name !!}</td>
                            <td>{!! $document->employment_type !!}</td>
                            <td>{!! $document->document_type !!}</td>
                            <td><div class="form-control btn btn-primary"><a style="color: white;text-decoration: none;" href="/admin/auto-documentation/add/{!! $document->id !!}">EDIT</a></div></td>
                        </tr>
                        @endforeach
                        </table>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include("admin.layouts.footer")
<script>

    $(document).on('change',"input[type='checkbox']", function(){
        if ($(this).prop("checked")) {
            if($(this).attr('data-name') == 'MA'){
                $("."+$(this).attr('data-name-f')+'_OP').trigger('click');
            }else{
                $("."+$(this).attr('data-name-f')+'_MA').trigger('click');
            }
        }
    });

    $("select[name='employment_type']").change(function () {
        let employment_type = $(this).find("option:selected").val();
        let options = '<option value="">Select Type</option>';
        if (typeof documentLists[employment_type] != 'undefined') {
            $.each(documentLists[employment_type], function (index, doc) {
                let index_ = index;
                index = index.replace(/_/g, " ").toLowerCase().replace(/\b[a-z]/g, function(letter) {
                    return letter.toUpperCase();
                });
                options += "<option value="+index_+">"+index+"</option>";
            });
            $("select[name='document_type']").html(options);
        }
        $(".choose_document_type_div").css({display:'flex'});
        $('.selectpicker').selectpicker('refresh');
    });


    let documentLists = {
        'salaried': {
            'id_proof': ['Pan Card','Form 60'],
            'address_proof': ['Aadhar card', 'Electricity Bill', 'Rent Agreement', 'Gas Bill', 'Passport', 'DL', 'Company allotted letter'],
            'income_proof':['Latest 3 Months Pay Slip'],
            'banking':['3 Months Bank Statement','6 Months Bank Statement','Security Cheque'],
            'co_applicant':['For Signing required', 'Co-Applicant Bank Statement','Co-Applicant Pan Card','Co-Applicant Aadhar Card']
        },
        'self_employed': {
            'id_proof': ['Pan Card'],
            'address_proof': ['Aadhar card', 'Electricity Bill', 'Rent Agreement', 'Gas Bill', 'Passport', 'DL', 'Company allotted letter'],
            'income_proof':['Latest 2 Year ITR', 'Form 26A'],
            'banking':['3 Months Bank Statement', '6 Months Bank Statement','Security Cheque'],
            'business_proof':['Shop Act','GST Certificate','Udyog Aadhaar Certificate'],
            'co_applicant':['For Signing required', 'Co-Applicant Bank Statement','Co-Applicant Pan Card','Co-Applicant Aadhar Card']
        }
    };

    $("select[name='document_type']").change(function () {
       let documents = $(this).val();
       //let documentSelect = $("select[name='document_name']").html('');
        let documentSelect = $(".document-table-list");
        documentSelect.html('');
       let employment_type = $("select[name='employment_type'] option:selected").val();
       $.each(documents, function(index, item){
           if (typeof documentLists[employment_type][item] != 'undefined') {
               $.each(documentLists[employment_type][item], function(index, doc){
                   documentSelect.append('<tr><td>'+doc+'</td><td><input type="checkbox" class="form-control '+doc.replace(/ /g, "_")+'_OP" data-name-f="'+doc.replace(/ /g, "_")+'" data-name="OP" data-id="'+index+'" name="'+doc+'"/></td><td><input type="checkbox" class="form-control '+doc.replace(/ /g, "_")+'_MA" data-name-f="'+doc.replace(/ /g, "_")+'"  data-name="MA" checked="checked" data-id="'+index+'" name="'+doc+'"/></td><td><input type="number" min="1" data-id="'+index+'" placeholder="Group Number" class="form-control" name="doc"/></td></tr>');
               });
           }
       });

        $('.selectpicker').selectpicker('refresh');
    });

    $(".save_button_list_div").click(function(){
        var document_set_name = $("input[name='document_set_name']").val();
        var employment_type = $("select[name='employment_type'] option:selected").val();
        var document_type = $("select[name='document_type']").val();

        if (document_set_name.length > 0 && employment_type.length > 0 && document_type.length > 0) {
            $(".init-loader").css({display: 'block'});


            let documents = [];
            $(".document-table-list > tr").each(function(index, item){
                let object = [];
                $(item).each(function (index,item) {
                    object.push({id:$(item).find('td').html()});
                    if (typeof $($(item).find('td')[1]).find('input') !== 'undefined'){
                        object.push({optional:$($(item).find('td')[1]).find('input').is(":checked")})
                    }
                    if (typeof $($(item).find('td')[2]).find('input') !== 'undefined'){
                        object.push({mandatory:$($(item).find('td')[2]).find('input').is(":checked")})
                    }
                    if (typeof $($(item).find('td')[3]).find('input') !== 'undefined'){
                        object.push({group:$($(item).find('td')[3]).find('input').val()})
                    }
                });
                documents.push(object);
            });

            let id = $('form').attr('data-id');

            var _token = '<?php echo csrf_token(); ?>';
            $.ajax({
                type: 'POST',
                url: "/admin/auto-documents",
                data: {
                    document_set_name: document_set_name,
                    _token: _token,
                    employment_type: employment_type,
                    document_type: document_type,
                    documents:documents,
                    id:id
                },
                dataType: "JSON",
                success: function (response) {
                    $(".init-loader").css({display: 'none'});
                    if (response.status !== 'OK') {
                        alert(response.message);
                    }else{
                        window.location.reload();
                    }
                }
            });
        }
    });
</script>