@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">
        <section class="content-header">
            <h1>
                COMPANY DETAILS FOR&nbsp{{strtoupper($row['name']) }}
            </h1>
        </section>

        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-3">

                        <!-- Profile Image -->
                        <div class="card card-outline card-success">
                            <div class="card-body card-profile">
                                <div class="text-center">
                                    {{-- <img class="profile-user-img img-responsive img-circle" @if(isset($vars['user']->img)) src="{{ url('/') }}/{{$vars['user']->img }}" @else src="{{ url('/') }}/user.png" @endif width="200" height="100" alt="User profile picture"> --}}
                                </div>
                                <h3 class="profile-username text-center">{{ ucwords($row['name']) }}</h3>

                                <p class="text-muted text-center">{{ ucwords($row['status']) }}</p>

                                <ul class="list-group list-group-unbordered">
                                    @isset($row['tin_no'])
                                        <li class="list-group-item">
                                            <b>TIN number</b> <a class="float-right">{{ ucwords($row['tin_no']) }}</a>
                                        </li>
                                    @endisset

                                    @isset($row['vrn_no'])
                                        <li class="list-group-item">
                                            <b>VRN number</b> <a class="float-right"
                                                                 style="font-size: 13px;">{{ ucwords($row['vrn_no']) }}</a>
                                        </li>
                                    @endisset
                                    @isset($row['code'])
                                        <li class="list-group-item">
                                            <b>code</b> <a class="float-right">{{ ucwords($row['code']) }}</a>
                                        </li>
                                    @endisset
                                    @isset($row['phone'])
                                        <li class="list-group-item">
                                            <b>Phone Number</b> <a class="float-right">{{ ucwords($row['phone']) }}</a>
                                        </li>
                                    @endisset
                                    @isset($row['address'])
                                        <li class="list-group-item">
                                            <b>Address</b> <a class="float-right">{{ ucwords($row['address']) }}</a>
                                        </li>
                                    @endisset
                                    @isset($row['bio'])
                                        <li class="list-group-item">
                                            <b>Bio</b> <a class="float-right">{{ ucwords($row['bio']) }}</a>
                                        </li>
                                    @endisset
                                    @isset($row['description'])
                                        <li class="list-group-item">
                                            <b>Description</b> <a
                                                    class="float-right">{{ ucwords($row['description']) }}</a>
                                        </li>
                                    @endisset

                                </ul>

                                {{-- <a href="javascript:void(0)" class="btn bg-gradient-orange btn-block  editTr" data-id="{{ $vars['user']->uuid }}" ><li class="fa fa-pencil-square-o"></li><b>Edit Profile</b></a> --}}
                            </div>


                        </div>
                    </div>


                    <div class="col-md-9">
                        <div class="card card-outline card-success">
                            <div class="card-header p-2">
                                <ul class="nav nav-pills">
                                    <li class="active nav-item"><a class="nav-link active" href="#company"
                                                                   data-toggle="tab">Edit Company</a></li>
                                    <li class="nav-item"><a class="nav-link search-source-detail" data-location="branches" href="#branches" data-toggle="tab">
                                            Branch </a></li>
                                    <li class="nav-item"><a class="nav-link search-source-detail" data-location="offices" href="#office" data-toggle="tab">
                                            Office </a></li>
                                    <li class="nav-item"><a class="nav-link search-source-detail" data-location="users" href="#user" data-toggle="tab">Users</a>
                                    </li>
                                </ul>
                            </div>


                            <div class="tab-content">
                                @if( Auth::user()->hasRole('admin'))
                                    <div class="active tab-pane card-header with-border" id="company">
                                        <form class="prevent-resubmit-form-company-edit" method="PUT"
                                              id="create_company_form" enctype="multipart/form-data">
                                            @csrf
                                            @include('companies.company_form')
                                        </form>
                                    </div>



                                    <div class="tab-pane card with-border" id="branches">

                                        <div class="card-header">
                                            <h3 class="card-title">Add or edit Branch:&nbsp</h3>
                                            <button id="toggle_branch_form"
                                                    class="btn  ml-auto bg-gradient-orange float-right toggle_branch_form prevent-resubmit-button toggle_company_create">
                                                Toggle Company
                                            </button>
                                        </div>

                                        <form class="prevent-resubmit-form-branch" style="display: none;"
                                              id="create_branch_form" enctype="multipart/form-data">
                                            @csrf
                                            @include('companies.branch')
                                        </form>
                                        <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['branches'] as  $branch)
                                                    @include('companies._branch_tr')
                                                @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class=" tab-pane card-header with-border" id="office">
                                        <div class="card-header">
                                            <h3 class="card-title">Edit or Add a new Office:&nbsp</h3>
                                            <button id="toggle_branch_form"
                                                    class="btn  ml-auto bg-gradient-orange float-right toggle_office_form prevent-resubmit-button toggle_company_create">
                                                Toggle Offices
                                            </button>
                                        </div>
                                        <form class="prevent-resubmit-form-office" style="display: none;"
                                              id="create_office_form" enctype="multipart/form-data">
                                            @csrf
                                            @include('companies.office')
                                        </form>

                                        <div class="card card-outline card-success">
                                            <div class="card-header">
                                                <h3 class="card-title">Office 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['offices'] as  $office)
                                                        @include('companies._office_tr')
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                    <div class=" tab-pane card-header with-border" id="user">
                                        <div class="card card-outline card-success">
                                            <div class="card-header">

                                                <div class="card-header">
                                                    <h3 class="card-title">Edit or Add new User:&nbsp</h3>
                                                    <button id="toggle_branch_form"
                                                            class="btn  ml-auto bg-gradient-orange float-right toggle_user_form prevent-resubmit-button toggle_company_create">
                                                        Toggle Users
                                                    </button>
                                                </div>
                                                <form class="prevent-resubmit-form-user" style="display: none;"
                                                      id="create_user_form" enctype="multipart/form-data">
                                                    @csrf
                                                    @include('companies._user')
                                                    <!-- /.card-body -->
                                                    <div class="card-footer">
                                                        <button type="submit"
                                                                class="btn bg-gradient-orange float-right prevent-resubmit-button">
                                                            Submit
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="card-body ">
                                                <table class="table table-striped data-table" id="user_table">
                                                    <thead>
                                                    <tr>
                                                        <th>Name</th>
                                                        <th>Gender</th>
                                                        {{--  <th>Email </th> --}}
                                                        <th>Phone</th>
                                                        <th>Roles</th>
                                                        <th>Action</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>

                                                    @foreach ($vars['users'] as $user)
                                                        @include('companies._user_tr')
                                                    @endforeach

                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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','.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");
                formService.append('field', "branch_id");
                asyncFetchAnyData(url = "find_model_detail_of_any", formService).then((risks) => {
                    $(`#create_user_form select[name="office_id"]`).children().remove();
                    $(`.office_search`).append(`${risks.view}`).trigger('change.select2');
                });
            }
        });

        $(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', 'companies');
    </script>

@endsection