@extends('layouts/contentLayoutMaster')

@section('title', 'Management Offices')

@section('vendor-style')
  {{-- Page Css files --}}
  <link rel="stylesheet" href="{{ asset(mix('fonts/font-awesome/css/font-awesome.min.css'))}}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/jstree.min.css'))}}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap5.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/rowGroup.bootstrap5.min.css')) }}">
  <link rel="stylesheet" href="{{ asset('tablesorter/dist/css/jquery-ui.css') }}">
  <link rel="stylesheet" href="{{ asset('tablesorter/dist/css/theme.jui.min.css') }}">
@endsection

@section('page-style')
  {{-- Page Css files --}}
  <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-tree.css')) }}">
@endsection

@section('content')

<!-- list start -->
<section class="app-office-list">

@include('content.partial.form-message')

<!-- Striped rows start -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Offices List</h4>
            </div>

            <div class="card-body">

                <form class="form" method="GET" action="{{route('offices.index')}}" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-12 d-flex justify-content-between">
                            <div class="col-6">

                            </div>
                            <div class="float-sm-left">
                                @can('Administration - Offices - Add')
                                <a class="btn btn-primary" href="{{route('offices.create')}}" role="button">Add New Office</a>
                                @endcan
                            </div>
                        </div>
                    </div>
                </form>

                <p align="center" id="top-list">
                    &nbsp;
                </p>

                <div id="jstree-basic">
                    @foreach($offices as $k => $office)
                    <ul>
                        <li class="jstree-open" data-jstree='{"icon" : "far fa-building"}'>
                            {{ $office->name }}

                            <span class="dropdown">
                              <button type="button" class="btn btn-sm dropdown-toggle hide-arrow py-0" data-bs-toggle="dropdown">
                                <i data-feather="more-vertical"></i>
                              </button>
                              <div class="dropdown-menu dropdown-menu-end">
                                @can('Administration - Offices - Edit')
                                <a class="dropdown-item" href="{{ route('offices.edit', ['office' => $office->id]) }}" onclick="window.location=this.href">
                                  <i data-feather="edit-2" class="me-50"></i>
                                  <span>Edit</span>
                                </a>
                                @endcan
                                @can('Administration - Offices - Remove')
                                <a class="dropdown-item" href="{{ route('offices.destroy', ['office' => $office->id]) }}" onclick="event.preventDefault(); document.getElementById('destroy-form-{{ $office->id }}').submit();">
                                  <i data-feather="trash" class="me-50"></i>
                                  <span>Remove</span>
                                </a>
                                <form method="POST" id="destroy-form-{{ $office->id }}" action="{{ route('offices.destroy', ['office' => $office->id]) }}">
                                    @csrf
                                    @method('delete')
                                </form>
                                @endcan
                              </div>
                            </span>

                            @include('content.admin.offices-child', [ 'office' => $office])
                        </li>
                    </ul>
                    @endforeach
                </div>

            </div>
        </div>
    </div>
</div>
<!-- Striped rows end -->
</section>
<!-- list ends -->
@endsection

@section('vendor-script')
  {{-- Vendor js files --}}
  <script src="{{ asset(mix('vendors/js/extensions/jstree.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/jszip.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/cleave/cleave.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/cleave/addons/cleave-phone.us.js')) }}"></script>
  <script src="{{ asset('tablesorter/dist/js/jquery.tablesorter.min.js') }}"></script>
  <script src="{{ asset('tablesorter/dist/js/jquery.tablesorter.widgets.min.js') }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset(mix('js/scripts/extensions/ext-component-tree.js')) }}"></script>
@endsection