@extends('layouts.blank')

@push('stylesheets')

@endpush

@push('inline-scripts')
    @if(isset($countriesSelection))
        let countriesSelection = null;
    @else
        let countriesSelection = [];
    @endif

    @if(isset($branchGroupingsSelectionList))
        let branchGroupingsSelectionList = null;
    @else
        let branchGroupingsSelectionList = [];
    @endif

    @if(isset($companiesSelection))
        let companiesSelection = null;
    @else
        let companiesSelection = [];
    @endif
@endpush

@push('scripts')
    <script src="{{ asset('js/branch.js') }}"></script>
@endpush

@section('main_container')
    @include('modals.branch')
    <div class="right_col" role="main">
        <div class="">
            <div class="page-title"></div>

            <div class="clearfix"></div>

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    @include('includes/notifications')
                </div>
            </div>

            <div class="row">
                {{--Branch Groupings--}}
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Branch Groups</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li>
                                    <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>

                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                       aria-expanded="false"><i class="glyphicon glyphicon-th-list"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li>
                                            <span class="label label-default"
                                                  style="display: block; border-radius: 0px;"><small>Options</small></span>
                                        </li>
                                        <li>
                                            <button type="button" class="btn btn-link" data-toggle="modal"
                                                    data-target=".branch-grouping-insert-modal"
                                                    style="text-decoration: none;">
                                                <small><span class="fa fa-plus"></span>&nbsp;&nbsp;Insert New Group</small>
                                            </button>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="close-link"><i class="fa fa-close"></i></a></li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content table-responsive">
                            <table id="branchGroupingDatatable" class="table table-striped jambo_table table-hover table-bordered">
                                <thead>
                                <tr>
                                    <th>Abbreviation</th>
                                    <th>Group</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @if(count($branchGroupings) > 0)
                                    @foreach($branchGroupings as $branchGrouping)
                                        <tr>
                                            <td>{{ $branchGrouping->abbreviation }}</td>
                                            <td><span class="label label-success customLabelSuccess">{{ $branchGrouping->name }}</span></td>


                                            <td>
                                                <button class="editBranchGrouping btn btn-info btn-xs"
                                                        data-branch-grouping-id="{{ $branchGrouping->id }}"
                                                        data-toggle="modal"
                                                        data-target=".branch-group-modal-edit">
                                                <span class="glyphicon glyphicon-pencil"></span>&nbsp;Modify
                                                </button>
                                                <button class="deleteBranchGrouping btn btn-danger btn-xs"
                                                        data-branch-grouping-id="{{ $branchGrouping->id }}"
                                                        data-toggle="modal"
                                                        data-target=".branch-group-modal-delete"
                                                ><span class="glyphicon glyphicon-trash"></span>&nbsp;Delete
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Branches</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li>
                                    <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>

                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                       aria-expanded="false"><i class="glyphicon glyphicon-th-list"></i></a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li>
                                        <span class="label label-default"
                                              style="display: block; border-radius: 0px;">
                                            <small>Options</small>
                                        </span>
                                        </li>
                                        <li>
                                            <button id="insertNewBranchButton" type="button" class="btn btn-link"
                                                    data-toggle="modal" data-target=".branch-modal"
                                                    style="text-decoration: none;">
                                                <small><span class="fa fa-plus"></span> Insert New Branch</small>
                                            </button>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a class="close-link">
                                        <i class="fa fa-close">
                                        </i>
                                    </a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content table-responsive">
                            <table id="branchDatatable" class="table table-responsive table-striped jambo_table table-hover table-bordered">
                                <thead>
                                <tr>
                                    <th>Company</th>
                                    <th>Branch</th>
                                    <th>Group</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @if(count($branches) > 0)
                                    @foreach($branches as $branch)
                                        <tr>
                                            <td>{{ $branch->company_code . ' - ' . $branch->company }}</td>
                                            <td>{{ $branch->branch_code . ' - ' . $branch->branch }}</td>

                                            <td>{{ $branch->group }}</td>
                                            <td>
                                                <button class="editBranch btn btn-info btn-xs"
                                                        data-branch-id="{{ $branch->id }}"
                                                        data-toggle="modal"
                                                        data-target=".branch-modal-edit"
                                                ><span class="glyphicon glyphicon-pencil"></span>&nbsp;Modify
                                                </button>

                                                <button class="deleteBranch btn btn-danger btn-xs"
                                                        data-branch-id="{{ $branch->id }}"
                                                        data-toggle="modal"
                                                        data-target=".branch-modal-delete"
                                                ><span class="glyphicon glyphicon-trash"></span>&nbsp;Delete
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection