@extends('layouts.mymaster')
@push("head")
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 

@endpush
@section('content')
   <!-- Start content -->
        <div class="m-page add-chance-page">
            <div class="container">
                <div class="row">
                      @foreach ($errors->all() as $error)
                                    <li class="alert-danger">{{ $error }}</li>
                                @endforeach
                    <div class="form-box">
                        <h2 class="center-title">طرح فرصة</h2>
                                 <form method="post" action="{{route('chances.store')}}"
                          enctype="multipart/form-data">
                        {{csrf_field()}}
                            <div class="form-group">
                                <input type="text" name="name" class="form-control" placeholder="اسم الفرصة">
                            </div>
                            <label style="margin-bottom: 15px" class='close-date'>تاريخ الإغلاق</label>
                            <div class="form-group">                           
                                <div class="input-append date" id="dp3" data-date="1/1/2012"
                                     autocomplete="false"
                                     data-date-format="dd-mm-yyyy">
                                    <input class="effect-9 form-control" placeholder="mm/dd/yyyy"
                                           type="date" name="close_date"
                                           >
                                  <!--  <span class="add-on"><i class="fa  fa-calendar"></i></span> -->
                                </div>
                            </div>
                            <div class="form-group">
                                <select name="sectors_id" class="select-css" >
                                    <option value="">اختيار القطاع</option>
                                     @foreach ($sectors  as $sector )


                                    <option value="{{ $sector->id }}">{{ $sector->name }} </option>

                                       @endforeach
                                </select>
                            </div>
                          <div class="form-group">
                            <select  class="effect-9 form-control select2" name="notes[]" multiple placeholder="الملاحظات">
                                 
                                                              @foreach (\App\Note::all()  as $note )


                                    <option value="{{ $note->id }}">{{ $note->name }} </option>

                                       @endforeach
                                   
                                </select>
                            </div>
                            
                                     <div class="form-group">
                                <select class="effect-9 form-control select2" name="places_id[]" multiple >
                                  
                                  @foreach ($places  as $place )
                                    <option value="{{ $place->id }}">{{ $place->name }} </option>

                                       @endforeach
                                </select>
                            </div>
                            
                            
                            <div class="form-group">
                                <input type="text" name="address" class="form-control" placeholder="عنوان الاستلام">
                            </div>
                            
                            <div class="" style="margin-bottom: 40px;">
                                <h4 class="form-title">طريقة طرح الفرصة</h4>
                                
                                <div class="form-group check-label">
                                    <label class="check-container">
                                        <input type="checkbox"  id='byPdf'>
                                        <span class="checkmark"></span>  
                                    </label>
                                    التقديم عن طريق ملف PDF
                                </div>
                              
                              <div class="form-group">
                                  
                           
                                <div class="choose-box" id='boxByPdf'>
                                    <h4>تحميل ملف</h4>
                                    <div class="file-container">
                                        <input type="file" name="file" id="file" class="inputfile" />
                                        <label for="file">اختر ملف</label>
                                    </div>
                                </div>
                                   </div>
                                <div class="form-group check-label">
                                    <label class="check-container">
                                        <input type="checkbox" id='byTable'>
                                        <span class="checkmark"></span>  
                                    </label>
                                    التقديم بجدول الكميات
                                 </div>
                                                               <div class="form-group">

  <div class="reg-part" id="pets-roww">
                            <h3>    {{trans('app.units.units')}}</h3>

                            <div class="form-group-lg row">
                                <div class="col-xs-12 col-md-4">
                                    <div class="new-f-group">
                                        <div class="form-group clearfix">
                                            <input type="text" name="units_name[]" class="effect-9 form-control"
           
                                            placeholder="{{trans('app.unit_name')}}">
                                            <span class="focus-border"><i></i></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-md-4 new-f-group">
                  
                                    <div class="form-group clearfix">
                                        <select name="units[]" class="effect-9 form-control">

                                            @foreach($units as $unit)
                                                <option value="{{ $unit->id }}">{{$unit->name}}</option>
                                            @endforeach
                                        </select><span class="focus-border"><i></i></span>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-md-4">
                                    <div class="new-f-group">
                                        <div class="form-group clearfix">
                                            <input type="text" name="qty[]"
                                                   class="effect-9 form-control"
                                                   placeholder="{{trans('app.quantity')}}">
                                            <span class="focus-border"><i></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <a class="add_field_button" role="button" data-toggle="collapse" id="units"
                           aria-expanded="false" aria-controls="collapseExample"><i class="fa fa-plus"></i>
                                {{trans('app.add_new_units')}}</a>
                            
                        <!--    <a id="others" class="add_field_button" style="margin-right: 20px" role="button"
                               data-toggle="collapse"
                               aria-expanded="false" aria-controls="collapseExample"><i class="fa fa-plus"></i>
                                {{trans('app.add_other_units')}}
                            </a> -->
                        </div>
                        <!-- Chance Table Form jQury
                                <div class="choose-box" id='boxByTable'>
                                    <h4>الوحدات</h4>
                             
                                    <div class="form-group">
                                        <input name="units_name[]" type="text"   id="unitname" class="form-control" placeholder="اسم الوحدة"
                                        
                                        />
                                    </div> 
                                   
                                    <div class="form-group"  >
                                        <select name="units[]" class="select-css" id="unittype" >
                                         
                                              @foreach($units as $unit)
                                                <option value="{{ $unit->id }}">{{$unit->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group" >
                                        <input type="number" name="qty[]" id="unitqut" class="form-control" placeholder="الكمية" />
                                    </div>
                                    <a class="add-more" id="add">
                                        <span><i class="fa fa-plus"></i></span>
                                        
                                        إضافة المزيد من الوحدات
                                    </a>
                                </div>
                           
                            </div>
                            -->
                             </div>
                             <!-- Result Table
                            <div id="Result">
                                <div class='table-responsive'>
                                    <table class="table table-hover" id="myTable">
                                        <thead>
                                          <tr>
                                            <th>اسم الوحدة</th>
                                            <th>كجم</th>
                                            <th>الكمية</th>
                                          </tr>
                                     
                                        </thead>
                                        <tbody>
                                   
                                        </tbody>
                                     </table>
                                 </div>
                            </div> -->
                            <div class="custom-form left-icon">
                                <div class="form-group">
                                    <span class="icony">
                                        <i class="fa fa-fw fa-phone"></i>
                                    </span>
                                    <input name="person_name" class="form-control" placeholder="مسؤول التواصل">
                                </div>
                            </div>
                            <div class="custom-form left-icon">
                            <div class="form-group">
                                <span class="icony">
                                    <i class="fa fa-fw fa-mobile"></i>
                                </span>
                                <input type="text" name="mobile" class="form-control" placeholder="رقم الموبايل">
                            </div>
                            </div>
                            <div class="custom-form left-icon">
                                <div class="form-group">
                                    <span class="icony">
                                        <i class="fa fa-fw fa-envelope"></i>
                                    </span>
                                    <input name="email" type="email" class="form-control" placeholder="البريد الإلكتروني">
                                </div>
                            </div>
                            <!-- So lets do it -->
                            
                            
                                  
                      
                            
                            
                            
                            
                            <!-- End of Try -->
                            <div class="form-btn">
                                <button class="fbutcenter"  type="submit">حفظ الفرصة كمسودة</button>
                            </div>
                        </form>
       
                    </div>
                </div>
            </div>
        </div>
    
<script type="text/javascript">
            $(function () {
                
                $('#boxByPdf').hide()
                $('#boxByTable').hide()
                                $('#pets-roww').hide()

                $('#Result').hide()
               var date = new Date();
               $('#dp3').datepicker({
                        minDate: date,
                });
                
                var inputs = document.querySelectorAll( '.inputfile' );
                Array.prototype.forEach.call( inputs, function( input ){
                    var label	 = input.nextElementSibling,
		            labelVal = label.innerHTML;
                    input.addEventListener( 'change', function( e ){
                        var fileName = '';
                        label.innerHTML = this.value;
                    })
                })
                
                
                
                const checkbox = document.getElementById('byPdf')
        
                checkbox.addEventListener('change', (event) => {
                  if (event.target.checked) {
                    $('#boxByPdf').show()
                  } else {
                    $('#boxByPdf').hide()
               
                  }
                })
                const checkbox1 = document.getElementById('byTable')
                
                checkbox1.addEventListener('change', (event) => {
                  if (event.target.checked) {
                    $('#pets-roww').show()
                      $('#pets-roww').show();
                  } else {
                $('#pets-roww').hide();
                       $('#pets-roww').hide();
                      
                  }
                })
                
                
            });
        </script>

    <script src="{{asset('/js/select2.min.js')}}" defer></script>
    <link href="{{asset('')}}/css/select2.min.css" rel="stylesheet">
    <style>
        .select2 {
            width: 100%;
        }
    </style>
  <script>
        $(function () {
            $('.select2').select2({
            });
            $('#accept-terms').change(function (e) {
                var $base = $('#can-buy');
                if ($base.length && e.target.checked) {
                    $base.removeAttr('disabled')
                } else {
                    $base.attr('disabled', true)
                }
            });
        });</script>

        <!-- End content --> 
        
   


                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            
                            <!--
                               <div class="form-group-lg row" id="pets-roww">
                                <div class="form-group clearfix ">
                                    
                                
                                    <div class="col-xs-12 col-md-10 new-f-group">
                                        <div class="form-group clearfix">
                                     <!-- Button trigger modal 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
اضف وحدات جديدة</button>


                                        </div>
                                    </div>
                                    
                                    
                                    
                                </div>
                            </div>



-->








                         
                          
                     
                                
                            

                        
                      


@endsection


@push('scripts')

    <script src="{{asset('/js/select2.min.js')}}" defer></script>
    <link href="{{asset('')}}/css/select2.min.css" rel="stylesheet">
    <style>
        .select2 {
            width: 100%;
        }
    </style>
       <script>
        $(function () {
            $('.select2').select2({
            });
            $('#accept-terms').change(function (e) {
                var $base = $('#can-buy');
                if ($base.length && e.target.checked) {
                    $base.removeAttr('disabled')
                } else {
                    $base.attr('disabled', true)
                }
            });
        });</script>

    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
     <script>
            $('#accept-terms').change(function (e) {
                var $base = $('#can-buy');
                if ($base.length && e.target.checked) {
                    $base.removeAttr('disabled')
                } else {
                    $base.attr('disabled', true)
                }
            });
            $('#dp3').datepicker({
                dateFormat: "dd-mm-yyy"
            });
            $('#date').datepicker({
                dateFormat: "dd-mm-yyy"
            });

            $('#others').on('click', function () {
                $(' <div class="form-group-lg row">\n' +
                    '                                <div class="col-xs-12 col-md-4">\n' +
                    '                                    <div class="new-f-group">\n' +
                    '                                        <div class="form-group clearfix">\n' +
                    '                                            <input type="text" name="others_name[]" class="effect-9 form-control"\n' +
                    '                                                   placeholder="{{trans('app.unit_name')}}">\n' +
                    '                                            <span class="focus-border"><i></i></span>\n' +
                    '                                        </div>\n' +
                    '                                    </div>\n' +
                    '                                </div>\n' +
                    '                                <div class="col-xs-12 col-md-4 new-f-group">\n' +
                    '                                    <div class="form-group clearfix">\n' +
                    '                                        <input type="text" name="others_units[]" class="effect-9 form-control"\n' +
                    '                                               placeholder="{{trans('app.the_unit')}}">\n' +
                    '                                    </div>\n' +
                    '                                </div>\n' +
                    '                                <div class="col-xs-12 col-md-4">\n' +
                    '                                    <div class="new-f-group">\n' +
                    '                                        <div class="form-group clearfix">\n' +
                    '                                            <input type="text" name="others_quantity[]" class="effect-9 form-control"\n' +
                    '                                                   placeholder="{{trans('app.quantity')}}">\n' +
                    '                                            <span class="focus-border"><i></i></span>\n' +
                    '                                        </div>\n' +
                    '                                    </div>\n' +
                    '                                </div>\n' +
                    '                            </div>\n').insertBefore('#units')
            })
            $('#units').on('click', function () {
                $(' <div class="form-group-lg row">\n' +
                    '                                <div class="col-xs-12 col-md-4">\n' +
                    '                                    <div class="new-f-group">\n' +
                    '                                        <div class="form-group clearfix">\n' +
                    '                                            <input type="text" name="units_name[]" class="effect-9 form-control"\n' +
                    '                                                   placeholder="{{trans('app.unit_name')}}">\n' +
                    '                                            <span class="focus-border"><i></i></span>\n' +
                    '                                        </div>\n' +
                    '                                    </div>\n' +
                    '                                </div>\n' +
                    '                                <div class="col-xs-12 col-md-4 new-f-group">\n' +
                    '                                    <div class="form-group clearfix">\n' +
                    '                                        <select name="units[]" type="text" class="effect-9 form-control">\n' +
                    '                                            <option value="{{null}}">{{trans('app.units.unit')}}</option>\n' +
                    '                                            @foreach($units as $unit)\n' +
                    '                                                <option value="{{$unit->id}}">{{$unit->name}}</option>\n' +
                    '                                            @endforeach\n' +
                    '                                        </select><span class="focus-border"><i></i></span>\n' +
                    '                                    </div>\n' +
                    '                                </div>\n' +
                    '                                <div class="col-xs-12 col-md-4">\n' +
                    '                                    <div class="new-f-group">\n' +
                    '                                        <div class="form-group clearfix">\n' +
                    '                                            <input type="text" name="qty[]" class="effect-9 form-control"\n' +
                    '                                                   placeholder="{{trans('app.quantity')}}">\n' +
                    '                                            <span class="focus-border"><i></i></span>\n' +
                    '                                        </div>\n' +
                    '                                    </div>\n' +
                    '                                </div>\n' +
                    '                            </div>').insertBefore('#units')
            })
            $('#filess').on('click', function () {
                $("<div class=\"form-group-lg row\">\n" +
                    "                                        <div class=\"col-xs-12 col-md-8\">\n" +
                    "                                            <div class=\"new-f-group\">\n" +
                    "                                                <div class=\"form-group clearfix\">\n" +
                    "                                                    <input type=\"text\" name=\"files_names[]\" class=\"effect-9 form-control\"\n" +
                    "                                                           placeholder=\"{{trans('app.file_name')}}\">\n" +
                    "                                                    <span class=\"focus-border\"><i></i></span>\n" +
                    "                                                </div>\n" +
                    "                                            </div>\n" +
                    "                                        </div>\n" +
                    "                                        <div class=\"col-xs-12 col-md-4\">\n" +
                    "                                            <div class=\"new-f-group\">\n" +
                    "                                                <div class=\"form-group clearfix\">\n" +
                    "                                                    <input type=\"file\" name=\"files[]\"\n" +
                    "                                                           class=\"effect-9 form-control\"\n" +
                    "                                                           placeholder=\"{{trans('app.file')}}\">\n" +
                    "                                                </div>\n" +
                    "                                            </div>\n" +
                    "                                        </div>\n" +
                    "                                    </div>").insertBefore('#filess')
            })
        </script>


@endpush