 @extends('adminlte::page')
 @section('css')
 <style>
     .checkmark {
         position: absolute;
         top: 0;
         left: 0;
         height: 33px;
         /* margin-left: 120px; */
         width: 33px;
         border: 1px solid #d2d6de;
     }

     .checkbox-list .checkmark:after {
         left: 10px;
         top: 2px;
         width: 10px;
         height: 22px;
         border: solid #3c8dbc;
         border-top-width: medium;
         border-right-width: medium;
         border-bottom-width: medium;
         border-left-width: medium;
         border-top-width: medium;
         border-right-width: medium;
         border-bottom-width: medium;
         border-left-width: medium;
         border-width: 0 2px 2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
     }
 </style>
 @stop
 @section('content')
 <?php Fun::lang() ?>
 <div class="title-add">
     <div class="page-bar">
         <ul class="page-breadcrumb">
             <li> <a class="ng-binding" href="#"><i class="fa fa-dashboard"></i> Dashboard</a> </li>
             <li><a href="#">Manage Agency</a></li>
         </ul>
     </div>
 </div>
 <div class="page">
     <div class="top-content">
         <div class="row">
             <div class="col-sm-12 col-xs-12">
                 <div class="title-page">
                     <div class="pull-left">
                         <h3>Create Agency</h3>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="row">
         <div class="col-sm-12 col-xs-12">

             <div class="form-wrapper">
                 {!! Form::open(array('route' => 'super-admin-agency.store','method'=>'POST','enctype'=>'multipart/form-data')) !!}

                 <div class="row">
                     <div class="form-group col-sm-6 col-xs-12">
                         <label class="required">Agency Type</label>
                         {!! Form::select('agency_type', $select_option, null, ['class' => 'form-control select2 agency_type']) !!}

                     </div>
                     <div class="form-group col-sm-6 col-xs-12 agency_team">
                         <label class="required">Agency Team</label>
                         {!! Form::select('agency_team_id', $agency_team, null, ['class' => 'form-control select2 agency_team']) !!}

                     </div>
                     <div class="form-group col-sm-6 col-xs-12 agency_group_type">
                         <label class="required">Agency Group Type</label>
                         {!! Form::select('agency_group_type', $agent_group, null, ['class' => 'form-control select2 agency_types']) !!}

                     </div>

                     <div class="form-group col-sm-6 col-xs-12">
                         <label class="required">User ID</label>
                         {!! Form::text('user_code', $increas, array('placeholder' => 'User ID','class' => 'form-control','readonly','required')) !!}
                     </div>
                     <div class="form-group col-sm-6 col-xs-12">

                         <label class="required">First Name</label>
                         {!! Form::text('user_firstname', null, array('placeholder' => 'First Name','class' => 'form-control','required')) !!}

                     </div>
                     <div class="form-group col-sm-6 col-xs-12">

                         <label class="required">Last Name</label>
                         {!! Form::text('user_lastname', null, array('placeholder' => 'Last Name','class' => 'form-control','required')) !!}

                     </div>
                     <div class="form-group col-sm-6 col-xs-12">

                         <label class="required">Gender</label>
                         <select name="user_gender" id="" class="select2 form-control">
                             <option value="Male">Male</option>
                             <option value="Female">Female</option>
                         </select>

                     </div>
                     <div class="form-group col-sm-6 col-xs-12">

                         <label class="required"> Date OF Birth </label>
                         <span class="note"> YYYY/MM/DD</span> {!! Form::text('user_dob', null, array('placeholder' => 'Date Of Birth','class' => 'form-control date_picker','required')) !!}

                     </div>
                     <div class="form-group col-sm-6 col-xs-12">

                         <label class="required">Personal Type By</label>
                         {!! Form::select('personal_type',["1"=>"ID Card","2"=>"Passport"],1, array('class' => 'form-control select2','required','id'=>'personal-type')) !!}

                     </div>
                     <div id="id-card">
                         <div class="form-group col-sm-6 col-xs-12">

                             <label class="required">ID Card Number</label>
                             {!! Form::text('user_cardid', null, array('placeholder' => '#########','class' => 'form-control','required')) !!}

                         </div>
                     </div>
                     <div id="passport-parent">
                         
                     </div>
                     <div class="form-group col-sm-6 col-xs-12">

                         <label class="required">Phone Number</label>
                        <!--  {!! Form::text('user_phone', null, array('placeholder' => 'Phone Number','class' => 'form-control number-only','required')) !!} -->

                        <input type="text" class="form-control number-only" name="user_phone" data-inputmask="'mask': ['999-999-9999', '+099 99 99 9999[9]-9999']" data-mask placeholder="Phone Number">

                     </div>
                     <div class="form-group col-sm-6 col-xs-12">

                         <label class="required">Reference</label>
                         {!! Form::text('user_reference', null, array('placeholder' => 'Reference','class' => 'form-control')) !!}

                     </div>
                     <div class="form-group col-sm-6 col-xs-12">

                         <label class="required">Email</label>
                         {!! Form::email('email', null, array('placeholder' => 'Email','class' => 'form-control','required')) !!}

                     </div>
                     <div class="form-group col-sm-6 col-xs-12">

                         <label class="required">Password</label>
                         {!! Form::password('password', array('placeholder' => 'Password','class' => 'form-control','required')) !!}

                     </div>
                     <div class="form-group col-sm-6 col-xs-12">

                         <label class="required">Confirm Password</label>
                         {!! Form::password('confirm_password', array('placeholder' => 'Password','class' => 'form-control','required')) !!}

                     </div>
                     <div class="form-group col-sm-6 col-xs-12">

                         <label>Sponsor</label>
                         {!! Form::select('parent_id', $agencys, null, ['class' => 'form-control select2','id'=>'sponsor']) !!}

                     </div>
                     <div class="form-group col-sm-6 col-xs-12">

                         <label>Bank Agency</label>
                         {!! Form::select('bank_agency_id', $bank_agency, null, ['placeholder'=> 'Please Select', 'class' => 'form-control bank_agency select2']) !!}

                     </div>
                     <div class="form-group col-sm-12 col-xs-12 bank_agency_table">
                         <table width="100%">
                             <tbody class="tboday-bank-agency">

                             </tbody>
                         </table>
                     </div>
                     {{--<div class="form-group col-sm-6 col-xs-6">--}}
                     {{--<label for="">Company Agent (check if this agent is the company itself)</label>--}}
                     {{--<br>--}}
                     {{--<label class="checkbox-list">--}}
                     {{--<input type="checkbox" id="check_all" name="company_agent" value="1">--}}
                     {{--<span class="checkmark"></span></label>--}}
                     {{--</div>--}}
                     <div class="form-group col-sm-12 col-xs-12">

                         <label class="required">Address</label>
                         {!! Form::textarea('address', null, array('placeholder' => 'Address','class' => 'form-control','rows'=>'2')) !!}

                     </div>
                     <div class="col-xs-4 col-sm-4 col-md-4">
                         <!-- <label for="cropzee-input" class="image-previewer" data-cropzee="cropzee-input"></label>
                         <input id="cropzee-input" name="image" type="file" accept="image/*">
                         <button onclick="cropzeeGetImage('cropzee-input')" style="display: none">Get Image (as blob / data-url)</button> -->
                         <div class="imageupload panel panel-default">
                             <div class="file-tab panel-body">
                                 <label class="btn button_warning btn-file">
                                     <span>Browse</span>
                                     <input type="file" name="image">
                                 </label>
                                 <button type="button" class="btn button_danger">Remove</button>
                             </div>
                         </div>
                     </div>
                     <div class="col-sm-12 col-xs-12">
                         <div class="form-group">
                             <button type="submit" class="button_sm button_primary pull-right"><span class="fa fa-save"></span> Save</button>
                             <button type="button" onClick="javascript:history.go(-1)" class="button_sm button_warning pull-right">
                                 <span class=" fa fa-arrow-circle-left"></span> Back</button>
                         </div>
                     </div>
                 </div>

                 {!! Form::close() !!}
             </div>
         </div>
     </div>
 </div>

 @endsection @section('js')
 <script type="text/javascript" src="{{asset('assets/controller/location.js')}}"></script>
 <script type="text/javascript" src="{{asset('assets/scripts/crop/cropzee.js')}}"></script>
 <script type="text/javascript">
    $(document).on("change","#personal-type",function(){
        var type=0;
        type=$(this).val();
        if(type==1){
            $("#passport-parent").empty();
            $("#id-card").append(`
                <div class="form-group col-sm-6 col-xs-12">
                    <label class="required">ID Card Number</label>
                    {!! Form::text('user_cardid', null, array('placeholder' => '#########','class' => 'form-control','required')) !!}
                </div>
            `);
        }
        else{
            $("#id-card").empty();
            $("#passport-parent").append(`
                <div class="form-group col-sm-6 col-xs-12 passport_id">

                    <label>Passport Number</label>
                    {!! Form::text('passport_number', null, array('placeholder' => 'Passport Number','class' => 'form-control')) !!}

                </div>
                <div class="form-group col-sm-6 col-xs-12 passport_date_issue">

                    <label>Passport Date Of Issue</label>
                    {!! Form::text('passport_date_issue', null, array('placeholder' => 'Passport Date Of Issue','class' => 'form-control date_picker','autocomplete'=> 'off')) !!}

                </div>
                <div class="form-group col-sm-6 col-xs-12 passport_expiry_date">

                    <label>Passport Expiry Date</label>
                    {!! Form::text('passport_expiry_date', null, array('placeholder' => 'Passport Expiry Date','class' => 'form-control date_picker','autocomplete'=> 'off')) !!}

                </div>
                <div class="form-group col-sm-6 col-xs-12 country_of_passport">

                    <label>Country Of Passport</label>
                    {!! Form::text('country_of_passport', null, array('placeholder' => 'Country Of Passport','class' => 'form-control')) !!}

                </div>

                <div class="form-group col-sm-6 col-xs-12 visa_type">
                    <label>Visa Type</label>
                    {!! Form::text('visa_type', null, array('placeholder' => 'Visa Type','class' => 'form-control')) !!}
                </div>
                <div class="form-group col-sm-6 col-xs-12 intended_date_of_entry">
                    <label>Intended Date Of Entry</label>
                    {!! Form::text('intended_date_of_entry', null, array('placeholder' => 'Intended Date Of Entry','class' => 'form-control date_picker','autocomplete'=> 'off')) !!}
                </div>
                <div class="form-group col-sm-6 col-xs-12 port_of_entry">
                    <label>Port Of Entry</label>
                    {!! Form::text('port_of_entry', null, array('placeholder' => 'Port Of Entry','class' => 'form-control')) !!}
                </div>
            `);
            $(".date_picker").datepicker();
        }
    });
     $(document).ready(function() {
         $(".agency_group_type").hide();
         $("#cropzee-input").cropzee({startSize: [85, 85, '%'],});
     });
     $(document).on('change', '.agency_type', function() {
         var id = $(this).find(':selected').val();
         $.ajax({
             type: 'post',
             url: "{{route('get_agent_type')}}",
             dataType: 'json',
             data: {
                 "_token": "{{ csrf_token() }}",
                 "id": id,
             },
             success: function(data) {
                 if (data.agency_type_name == 'Agent Group') {
                     $(".agency_group_type").show();
                 } else {
                     $(".agency_group_type").hide();
                 }
             }
         });

     });
     $(document).on('change', '.agency_type', function() {
         var id = $(this).find(':selected').val();
         $("#sponsor").empty();

         $.ajax({
             type: 'post',
             url: "{{route('get_agent_sponsor_type')}}",
             dataType: 'json',
             data: {
                 "_token": "{{ csrf_token() }}",
                 "id": id,
             },
             success: function(data) {

                 $("#sponsor").empty();

                 var opt = '<option>please select</option>';
                 $('#sponsor').append(opt);
                 $.each(data, function(index, value) {
                     opt = '<option value="' + value.id + '">' + value.name_mixed + '</option>';
                     $('#sponsor').append(opt);
                 });

             }
         });

     });
     $(document).on('change', '.bank_agency', function() {
         var id = $(this).find(':selected').val();
         var check = $(".id" + id).val();
         if (check == null) {
             $.ajax({
                 type: 'POST',
                 url: "{{route('get_bank_agency')}}",
                 dataType: 'json',
                 data: {
                     "_token": "{{ csrf_token() }}",
                     "id": id,
                 },
                 success: function(data) {
                     $(".bank_agency_table").show();
                     if (data) {
                         var row = '<tr>' +
                             '<td>' +
                             '<input type="hidden" name="bank_agency[]" value="' + data.id + '">' +
                             '<input type="text" name= "" value="' + data.name + '" class="form-control id' + id + '" placeholder="Bank" readonly>' +
                             '</td>' +
                             '<td><input type="text" name= "account_name[]" class="form-control" autocomplete="off" placeholder="Acccount Name" required></td>' +
                             '<td><input type="number" name= "account_number[]" class="form-control" autocomplete="off" placeholder="Account Number" required></td>' +
                             '<td><button type="button" class="remove_row btn button_danger"><i class="glyphicon glyphicon-trash"></i></button></td>' +
                             '</tr>';
                         $('.tboday-bank-agency').append(row);
                     }

                 }
             });
         }
     });

     $(document).ready(function() {
         $(document).on('click', '.remove_row', function() {
             var index_ = $(this).data('index');
             $(this).closest('tr').remove();
         });
     });
 </script>
 @endsection