@extends('admin.layouts.master')
@section('content')
    <section id="basic-horizontal-layouts">
        <div class="row match-height">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">اضف قسيمة</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <form class="form form-horizontal" action="{{route('admin.contracts.store')}}" method="POST" enctype="multipart/form-data">
                                {{csrf_field()}}
                                <div class="form-body">
                                    <div class="row">
                                            <div class="col-12">
                                                <div class="form-group row">
                                                    <div class="col-md-4">
                                                        <span>اسم القسيمة</span>
                                                    </div>
                                                    <div class="col-md-8">
                                                        <input required type="text" class="form-control" name="name" placeholder="اسم القسيمة">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-12">
                                                <div class="form-group row">
                                                    <div class="col-md-4">
                                                        <span>اسم المهندس</span>
                                                    </div>
                                                    <div class="col-md-8">
                                                        <select name="engineer_id" class="form-control" required>
                                                            <option selected disabled value="">اختر المهندس</option>
                                                            @foreach($engineers as $engineer)
                                                                <option value="{{$engineer->id}}">{{$engineer->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                        <div class="col-12">
                                            <div class="form-group row">
                                                <div class="col-md-4">
                                                    <span>اسم المالك</span>
                                                </div>
                                                <div class="col-md-8">
                                                    <select name="owner_id" class="form-control" required>
                                                        <option selected disabled value="">اختر المالك</option>
                                                        @foreach($owners as $owner)
                                                            <option value="{{$owner->id}}">{{$owner->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group row">
                                                <div class="col-md-4">
                                                    <span>عنوان القسيمة</span>
                                                </div>
                                                <div class="col-md-8">
                                                    <input required type="text" class="form-control" name="address" placeholder="عنوان القسيمة">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group row">
                                                <div class="col-md-4">
                                                    <span>المكتب الهندسي</span>
                                                </div>
                                                <div class="col-md-8">
                                                    <input required type="text" class="form-control" name="engineering_office" placeholder="المكتب الهندسي">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group row">
                                                <div class="col-md-4">
                                                    <span>تاريخ بدء الاعمال</span>
                                                </div>
                                                <div class="col-md-8">
                                                    <input required type="date" class="form-control" name="start_date">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-group row">
                                                <div class="col-md-4">
                                                    <span>صورة</span>
                                                </div>
                                                <div class="col-md-8">
                                                    <input type="file"  class="form-control" name="image" required>
                                                </div>
                                            </div>
                                        </div>
                                        <hr class="col-11 border-light">
                                        <div class="card-header mb-2">
                                            <h4 class="card-title">بنود الاعمال</h4>
                                        </div>
                                        <!-- terms holder -->
                                        <div id="terms_holder" class="col-12">
                                            <div class="wraper">
                                                <div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>اسم البند</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input  type="text" class="form-control" name="term_name[]" placeholder="اسم البند">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>الدفعة المالية</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input  type="number" class="form-control" name="term_money[]" placeholder="الدفعة المالية">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>


                                            <div class="col-12">
                                                <button type="button" class="btn btn-success pull-right appender">اضافة بند <i class="feather icon-plus-square"></i> </button>
                                            </div>
                                        </div>
                                        <!-- terms holder -->
                                        <hr class="col-11 border-light">
                                        <div class="card-header mb-2">
                                            <h4 class="card-title">المخططات</h4>
                                        </div>
                                        <!-- diagrams holder -->
                                        <div id="diagrams_holder" class="col-12">
                                            <div class="wraper">
                                                <div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>اسم المخطط</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input  type="text" class="form-control" name="diagram_name[]" placeholder="اسم المخطط">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>تحميل الملف</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input  type="file" class="form-control" name="diagram_file[]">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <button type="button" class="appender btn btn-success pull-right">اضافة مخطط <i class="feather icon-plus-square"></i> </button>
                                            </div>
                                        </div>

                                        <!-- diagrams holder -->
                                        <!-- CONTRACTS holder -->
                                        <hr class="col-11 border-light">
                                        <div class="card-header mb-2">
                                            <h4 class="card-title">العقود</h4>
                                        </div>
                                        <div id="contracts_holder" class="col-12">
                                            <div class="wraper">
                                                <div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>اسم العقد</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input  type="text" class="form-control" name="contract_name[]" placeholder="اسم العقد">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>تحميل الملف</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input  type="file" class="form-control" name="contract_file[]">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>الصلاحيات</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <div class="custom-control d-inline-block custom-switch custom-switch-primary mr-2 mb-1">
                                                                    <p class="mb-1">الادارة</p>
                                                                    <input type="checkbox" name="contract_roles[0][]" value="management" class="custom-control-input" id="management" checked>
                                                                    <label class="custom-control-label" for="management"></label>
                                                                </div>
                                                                <div class="custom-control d-inline-block custom-switch custom-switch-primary mr-2 mb-1">
                                                                    <p class="mb-1">المحاسبة</p>
                                                                    <input type="checkbox" name="contract_roles[0][]" value="accountant" class="custom-control-input" id="accountant">
                                                                    <label class="custom-control-label" for="accountant"></label>
                                                                </div>
                                                                <div class="custom-control d-inline-block custom-switch custom-switch-primary mr-2 mb-1">
                                                                    <p class="mb-1">المالك</p>
                                                                    <input type="checkbox" name="contract_roles[0][]" value="owner" class="custom-control-input" id="owner">
                                                                    <label class="custom-control-label" for="owner"></label>
                                                                </div>
                                                                <div class="custom-control d-inline-block custom-switch custom-switch-primary mr-2 mb-1">
                                                                    <p class="mb-1">المهندس</p>
                                                                    <input type="checkbox" name="contract_roles[0][]" value="engineer" class="custom-control-input" id="engineer">
                                                                    <label class="custom-control-label" for="engineer"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <button type="button" class="appender btn btn-success pull-right">اضافة عقد <i class="feather icon-plus-square"></i> </button>
                                            </div>
                                        </div>

                                        <!-- quantities holder -->
                                        <hr class="col-11 border-light">
                                        <div class="card-header mb-2">
                                            <h4 class="card-title">معلومات وكميات</h4>
                                        </div>
                                        <div id="quantities_holder" class="col-12">
                                            <div class="wraper">
                                                <div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>مساحة القسيمة</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input  type="text" class="form-control" name="area" placeholder="مساحة القسيمة">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>مسطحات القسيمة</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input  type="text" class="form-control" name="surfaces" placeholder="مسطحات القسيمة">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>ارتفاعات الادوار</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input  type="text" class="form-control" name="height" placeholder="ارتفاعات الادوار">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>عدد الحمامات</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input  type="text" class="form-control" name="bathrooms" placeholder="عدد الحمامات">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>عدد المطابخ</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input  type="text" class="form-control" name="kitchens" placeholder="عدد المطابخ">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>عدد الدرج</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input  type="text" class="form-control" name="stairs" placeholder="عدد الدرج">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>تحميل ملف حصر الكميات</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <input  type="file" class="form-control" name="quantities[]" multiple>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12">
                                                        <div class="form-group row">
                                                            <div class="col-md-4">
                                                                <span>الصلاحيات</span>
                                                            </div>
                                                            <div class="col-md-8">
                                                                <div class="custom-control d-inline-block custom-switch custom-switch-primary mr-2 mb-1">
                                                                    <p class="mb-1">الادارة</p>
                                                                    <input type="checkbox" name="quantity_roles[]" value="management" class="custom-control-input" id="management33" checked>
                                                                    <label class="custom-control-label" for="management33"></label>
                                                                </div>
                                                                <div class="custom-control d-inline-block custom-switch custom-switch-primary mr-2 mb-1">
                                                                    <p class="mb-1">المحاسبة</p>
                                                                    <input type="checkbox" name="quantity_roles[]" value="accountant" class="custom-control-input" id="accountant33">
                                                                    <label class="custom-control-label" for="accountant33"></label>
                                                                </div>
                                                                <div class="custom-control d-inline-block custom-switch custom-switch-primary mr-2 mb-1">
                                                                    <p class="mb-1">المالك</p>
                                                                    <input type="checkbox" name="quantity_roles[]" value="owner" class="custom-control-input" id="owner33">
                                                                    <label class="custom-control-label" for="owner33"></label>
                                                                </div>
                                                                <div class="custom-control d-inline-block custom-switch custom-switch-primary mr-2 mb-1">
                                                                    <p class="mb-1">المهندس</p>
                                                                    <input type="checkbox" name="quantity_roles[]" value="engineer" class="custom-control-input" id="engineer33">
                                                                    <label class="custom-control-label" for="engineer33"></label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

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


                                        <!-- CONTRACTS holder -->
                                        <div class="col-md-8 offset-md-4">
                                            <button type="submit" class="btn btn-primary mr-1 mb-1">حفظ</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script>
        var checkboxes_count = 0;
        $('.appender').click(function (){
            var parent_id = $(this).parent().parent().attr('id');
            var terms = $('#'+parent_id + '  .wraper > div:first-child').clone();
            terms.find("input[type=text],input[type=file],input[type=number]").val("");
            // terms.find(":checkbox").prop("checked",false);
            var checkbnoxes = terms.find(':checkbox');
            if (checkbnoxes.length){checkboxes_count++;}
            terms.find(':checkbox').each(function(index){
                var num = Math.random();
                jQuery(this).attr('id', jQuery(this).attr('id')+ '-' +num);
                jQuery(this).attr('name','contract_roles['+checkboxes_count+'][]');
                // jQuery(this).attr('name',jQuery(this).attr('name')+'['+checkboxes_count+']');
                jQuery(this).siblings(".custom-control-label").attr('for',jQuery(this).attr('id'));
            });
            $('#'+parent_id+' .wraper').append(terms);
        });
    </script>
@endsection