@extends('main')
@section('css')

@endsection
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
        </h1>
        <ol class="breadcrumb">

        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-4">
                <div class="card card-outline card-success">
                    <div class="card-header with-border">
                        <h3 class="card-title">Add {{$vars['name']}}</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form class="prevent-resubmit-form" id="create_group_form" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="id" >
                        <input type="hidden" name="uuid" >
                        <input type="hidden" name="entered_by_id" value="{{auth()->user()->id}}" required>
                        <div class="card-body">
                            <div class="box-body">

                                <div class="form-group">
                                    <label for="exampleInputEmail1">Name</label>
                                    <input type="text" name="name" class="form-control"  placeholder="Office Name.."  required >
                                </div>
       
       
                                <div class="form-group">
                                 <label for="exampleInputEmail1 select2">Head Of office</label>
                                   <select style="width:100%;" class="form-control user_search select2" id="user_header_selector_reset" name="head_id" >
                                    <option value="">Select Head of branch</option>
                                    @foreach(\App\Models\User::get() as $user)
                                        <option value="{{$user->id}}">{{$user->name}}</option>
                                    @endforeach
                                  </select>
                               </div>
       
                               <div class="form-group">
                                 <label for="exampleInputEmail1 select2">Company Name</label>
                                   <select style="width:100%;" class="form-control company_search select2" id="company_header_selector_reset" name="company_id" >
                                    <option value="">Select campany name</option>
                                    @foreach(\App\Models\Company::get() as $company)
                                    <option value="{{$company->id}}">{{$company->name}}</option>
                                    @endforeach
                                  </select>
                               </div>

                               {{-- <div class="form-group">
                                <label for="exampleInputEmail1 select2">Company Name</label>
                                  <select style="width:100%;" class="form-control company_search select2" id="company_header_selector_reset" name="company_id" >
                                   <option value="">Select campany name</option>
                                   @foreach(\App\Models\Company::get() as $company)
                                   <option value="{{$company->id}}">{{$company->name}}</option>
                                   @endforeach
                                 </select>
                              </div> --}}

                               <div class="form-group">
                                <label for="exampleInputEmail1"> Branch Name: </label>
                                <select style="width:100%;" class="form-control branch_search select2" name="branch_id">
                                </select>
                            </div>
       
                               <div class="form-group">
                                 <label for="exampleInputParameter">Code:</label>
                                 <input type="text" name="code" class="form-control"  placeholder="Code.." >
                             </div>
       
                                   <div class="form-group">
                                       <label for="exampleInputParameter">Address:</label>
                                       <input type="text" name="address" class="form-control"  placeholder="Address.." >
                                   </div>
       
                                   <div class="form-group">
                                       <label for="exampleInputParameter">Location:</label>
                                       <input type="text" name="location" class="form-control"  placeholder="Location.."  required >
                                   </div>
       
       
                                     <div class="form-group">
                                       <label for="contacts" class="current-contact"> Phone:</label>
                                       <input type="text" name="phone" class="form-control griding_one"  placeholder="Phone.." >
                                   </div>
       
                                <div class="form-group">
                                    <label >Status</label>
                                   <select class="form-control " name="status" required>
                                     <option value="Active">Active</option>
                                     <option value="Inactive">Inactive</option>
                                   </select>
                                </div>
       
                                <div class="form-group">
                                   <label for="exampleInputPassword1">Description</label>
                                   <textarea  rows="3" name="description" class="form-control"  placeholder="Decsription.." ></textarea>
                                </div>
       
                                <input type="hidden" name="entered_by_id"  value="{{ Auth::user()->id }}">
                           </div>
    

                        </div>
                        <!-- /.card-body -->
                        <div class="card-footer">
                            <button type="submit" class="btn bg-gradient-teal float-right prevent-resubmit-button trigger-modal" >
                                Submit
                            </button>
                        </div>
                    </form>
                </div>
                <!-- /.card -->
            </div>

            <div class="col-md-8">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title">{{$vars['name']}} List</h3>
                    </div>
                    <div class="card-body ">
                        <table class="table table-striped data-table" id="create_group_form_table">
                            <thead>
                            <tr>
                                <th>Name</th>
                                <th>Company</th>
                                <th>Location</th>
                                <th>Status</th>
                                <th style="width: 10%">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($vars['data'] as  $row)
                                @include('offices._tr')
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
@endsection



@section('js')

    <script type="text/javascript">
        // initializeSubmitFunction('create_group_form', '{{$vars['url']}}');

        // $('.trigger-modal').on('click', function () {

        //     Swal.fire({
        //         title: 'Are you sure you want to submit',
        //         width: "750px",
        //         buttonsStyling: false,
        //         showCancelButton: true,
        //         customClass: {
        //         confirmButton: 'btn btn-primary btn-lg mr-2',
        //         cancelButton: 'btn btn-danger btn-lg',
        //         loader: 'custom-loader',
        //         },
        //         loaderHtml: '<div class="spinner-border text-primary"></div>',
        //         preConfirm: () => {
        //         Swal.showLoading()
        //         return new Promise((resolve) => {
        //             setTimeout(() => {
        //             resolve(true)
        //             }, 3000)
        //         })
        //         },
        //     })

        // })

        $(document).on('submit', '#create_group_form', function (e) {
            e.preventDefault();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var formdata = new FormData(this);


            console.log("Tried to ");
            $.ajax({
                type: "POST",
                url: '/offices',
                processData: false,
                contentType: false,
                data: formdata,
                success: function (data) {

                    console.log(data);
                    $('#user_table').prepend(data);
                    document.getElementById("create_group_form").reset();
                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                    close_modal('guardian_create_model');
                    // show_alert('warning', 'User created successful, use your latest four digits of your phone number as initial password');
                    swal({
                        title: 'User created Succesfully',
                        text: "Keep safe the password for security maintainances",
                        type: 'success',
                        confirmButtonText: 'Ok',
                        confirmButtonClass: 'btn btn-success',
                        buttonsStyling: false
                    })
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    $('.prevent-resubmit-button').prop("disabled", false);
                    $('.prevent-resubmit-button').html('Submit');
                    close_modal('guardian_create_model');
                    show_alert('danger', xhr.responseText);
                }
            });
        });
        //END CREATE USER


         // SELECT BRANCH BY USING COMPANY ID
         $(document).on('change','.company_search', function(e) {
            Swal.showLoading();
            if ($(this).val()) {
                let formService = new FormData();
                formService.append('id', $(this).val());
                formService.append('table', "App\\Models\\Branch");
                asyncFetchAnyData(url = "find_model_detail", formService).then((risks) => {
                    $(`#create_user_form select[name="branch_id"]`).children().remove();
                    $(`.branch_search`).append(`${risks.view}`).trigger('change.select2');
                    Swal.hideLoading()
                });
            }
        });

    </script>

@endsection