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

@endsection
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1></h1>
    </section>
    <!-- Main content -->
    <section class="content col-md-12" id="main-content">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-outline card-success">
                    <div class="card-header with-border">
                        <h3 class="card-title">Add {{$vars['name']}}</h3>
                        <button class="btn  ml-auto bg-gradient-orange float-right prevent-resubmit-button toggle_company_create">Toggle Company </button>
                    </div> 
                    <!-- /.card-header -->

                    <!-- form start -->
                    <form class="prevent-resubmit-form-company-create" method="POST" action="{{route('companies.store')}}" style="display: none;" id="create_company_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 row">

                            <div class="form-group col-md-2">
                                <label for="exampleInputEmail1">Name</label>
                                <input type="text" name="name" class="form-control"  placeholder="Company Name.."  required >
                            </div>

                            <div class="form-group col-md-2">
                                <label for="exampleInputEmail1 select2">Class</label>
                                <select style="width:100%;" class="form-control  select2"  name="customer_class_id" required>
                                    <option value="">Select Class</option>
                                    @foreach(\App\Models\CustomerClass::get() as $user)
                                        <option value="{{$user->id}}">{{$user->name}}</option>
                                    @endforeach
                                </select>
                            </div>


                            <div class="form-group col-md-2">
                                <label for="exampleInputEmail1 select2">Head Of company</label>
                                <select style="width:100%;" class="form-control user_search select2" id="branch_header_selector_reset" name="head_id" >
                                    <option value="">Select Head of </option>
                                    @foreach(\App\Models\User::get() as $user)
                                        <option value="{{$user->id}}">{{$user->name}}</option>
                                    @endforeach
                                </select>
                            </div>



                            <div class="form-group col-md-2">
                                <label for="exampleInputParameter">Address:</label>
                                <input type="text" name="address" class="form-control"  placeholder="Address.." >
                            </div>

                            <div class="form-group col-md-2">
                                <label for="exampleInputParameter">Location:</label>
                                <input type="text" name="location" class="form-control"  placeholder="Location.."  required >
                            </div>


                            <div class="form-group col-md-2">
                                <label for="contacts" class="current-contact"> Phone:</label>
                                <input type="text" name="phone" class="form-control griding_one"   placeholder="Phone.." required>
                            </div>

                            <div class="form-group col-md-2">
                                <label for="File" class="current-file"> Profile:</label>
                                <input type="file" name="image" class="form-control griding_one"  placeholder="Profile.." >
                            </div>

                            <div class="form-group col-md-2">
                                <label for="contacts" class="current-contact"> Tin no:</label>
                                <input type="text" name="tin_no" class="form-control griding_one"  placeholder="tin no.." >
                            </div>

                            <div class="form-group col-md-2">
                                <label for="contacts" class="current-contact"> Vrn:</label>
                                <input type="text" name="vrn_no" class="form-control griding_one"  placeholder="vrn_no.." >
                            </div>

                            <div class="form-group col-md-2">
                                <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 col-md-3">
                                <label for="exampleInputPassword1">CODE </label>
                                <input   name="code" class="form-control"  placeholder="Code Given By Tira.."  required>
                            </div>

                            <input type="hidden" name="entered_by_id"  value="{{ Auth::user()->id }}">

                            <div class="col-md-1">
                                <button type="submit" style="margin-top: 35px" class="btn bg-gradient-teal  prevent-resubmit-button">
                                    Submit
                                </button>
                            </div>
                        </div>
                        <!-- /.card-body -->
                        
                    </form>
                     <!-- form ends -->

                </div>
                <!-- /.card -->
            </div>

            <div class="col-md-12">
                <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 id="create_group_form_table" class="data-table table table-striped">
                            <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Name</th>
                                <th>Address</th>
                                <th>Location</th>
                                <th>Status</th>
                                <th class="noExport">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($vars['data'] as  $row)
                                @include('companies._tr')
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
@endsection



@section('js')


    <script type="text/javascript">
    $(".company_view").on('click', function (e) {
        e.preventDefault();
        const link  = $(this).attr('href');
        $.ajax({
            url: link,
            type: 'GET',
            success: function (response) {
                $('#main-content').replaceWith(response);
            }

        })
    });

    $(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) => {
                    $(`#prevent-resubmit-form-branch select[name="branch_id"]`).children().remove();
                    $(`.branch_search`).append(`${risks.view}`).trigger('change.select2');
                    Swal.hideLoading()
                });
            }
        });

        $(document).on('change','.branch_search', function(e) {
            Swal.showLoading();
            if ($(this).val()) {
                let formService = new FormData();
                formService.append('id', $(this).val());
                formService.append('table', "App\\Models\\Office");
                asyncFetchAnyData(url = "find_model_detail", formService).then((risks) => {
                    $(`#create_user_form select[name="office_id"]`).children().remove();
                    $(`.office_search`).append(`${risks.view}`).trigger('change.select2');
                });
            }
            Swal.hideLoading()
        });

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

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

            let formData = new FormData(this);

            Swal.fire({
                title: "Do you want to save the changes?",
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: "Save",
                denyButtonText: `Don't save`
                }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "POST",
                        url: "/branches",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            // console.log(response);
                            // $("#company_id").prepend(`<option value="${data.company.id}" selected >${data.company.name}</option>`);
                            Swal.fire("Saved!", "", "success");
                        },
                    });
                } else if (result.isDenied) {
                    Swal.fire("Changes are not saved", "", "info");
                }
            });
        });



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

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

            let formData = new FormData(this);

            Swal.fire({
                title: "Do you want to save the changes?",
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: "Save",
                denyButtonText: `Don't save`
                }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "POST",
                        url: "/offices",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            // console.log(response);
                            // $("#company_id").prepend(`<option value="${data.company.id}" selected >${data.company.name}</option>`);
                            Swal.fire("Saved!", "", "success");
                        },
                    });
                } else if (result.isDenied) {
                    Swal.fire("Changes are not saved", "", "info");
                }
            });
        });


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

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

            let formData = new FormData(this);

            Swal.fire({
                title: "Do you want to save the changes?",
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: "Save",
                denyButtonText: `Don't save`
                }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "POST",
                        url: "/users",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            // console.log(response);
                            // $("#company_id").prepend(`<option value="${data.company.id}" selected >${data.company.name}</option>`);
                            Swal.fire("Saved!", "", "success");
                        },
                    });
                } else if (result.isDenied) {
                    Swal.fire("Changes are not saved", "", "info");
                }
            });
        });


    $(document).on('click','.toggle_company_create',function(e){
        $('.prevent-resubmit-form-company-create').toggle('slow');
     })

     $(document).on('click','.toggle_company_edit',function(e){
        $('.prevent-resubmit-form-company-edit').toggle('slow');
    })

    $(document).on('click','.toggle_branch_form',function(e){
        $('.prevent-resubmit-form-branch').toggle('slow');
     })

     $(document).on('click','.toggle_office_form',function(e){
        $('.prevent-resubmit-form-office').toggle('slow');
     })

     $(document).on('click','.toggle_user_form',function(e){
        $('.prevent-resubmit-form-user').toggle('slow');
     })

    {{--initializeSubmitFunction('create_company_form', '{{$vars['url']}}');--}}
    </script>

@endsection