@extends('layouts.master')
@section('title', 'Departments')
@section('pagetitle', 'List of Departments')

@section('content')
    <main>
        <div class="main">
            <div class="student mb-60">
                <div class="header mb-30">
                    <h1 class="hd">Overview</h1>
                    <button
                        id="addschoolBtn" data-modal-target="#add-school" class="start">
                        <span class="material-icons-sharp">add</span> Add Department
                    </button>
                </div>

                <div class="subHeading mb-30">
                    <div class="leftsub">
                        <div class="tabletab l-active" data-targetname="allschools">
                            <h4 class="t-active">All Schools</h4>
                            <span class="tabletab-number number active">{{$allSchoolsCnt}}</span>
                        </div>
                        <div class="tabletab" data-targetname="activeschools">
                            <h4>Active</h4>
                            <span class="tabletab-number number">{{$activeSchoolsCnt}}</span>
                        </div>
                        <div class="tabletab" data-targetname="inactiveschools">
                            <h4>Inactive</h4>
                            <span class="tabletab-number number">{{$inactiveSchoolsCnt}}</span>
                        </div>
                    </div>
                    <div class="rightsub">
{{--                        <div class="search">--}}
{{--                            <input--}}
{{--                                type="search"--}}
{{--                                placeholder=" "--}}
{{--                                class="search_input"--}}
{{--                                name=""--}}
{{--                                id=""--}}
{{--                            />--}}
{{--                            <label for="search" class="search_label">Search</label>--}}
{{--                            <span class="material-icons-sharp search-icon">search</span>--}}
{{--                        </div>--}}
                        <div class="ml-10">
{{--                            <button type="submit" class="more">Import List</button>--}}
{{--                            <button type="submit" class="more">Export List</button>--}}
                        </div>
                    </div>
                </div>

                <div id="allschools" class="table-data all-schools">
                    <table>
                        @if(count($schools) > 0)
                            <thead>
                            <tr>
                                <th>Title</th>
                                <th>Status</th>
                                <th>Date added</th>
                                <th class="text-center align-middle">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($schools as $school)
                                <tr>
                                    <td>{{ !empty(data_get($school, 'title')) ?  data_get($school, 'title')  : "-" }}</td>
                                    <td>{{ !empty(data_get($school, 'status')) ?  (data_get($school, 'status') ? "Active": "Inactive")  : "Inactive" }}</td>
                                    <td>{{ !empty(show_date($school->created_at)) ?  show_date($school->created_at)  : "-" }}</td>
                                    <td class="text-center align-middle">
                                        <button
                                            id="editDepartmentBtn"
                                            class="btn btn-icon edit" data-modal-target="#edit-career"
                                            data-id="{{ !empty(data_get($school, 'id')) ?  data_get($school, 'id')  : "-" }}"
                                            data-title="{{ !empty(data_get($school, 'title')) ?  data_get($school, 'title')  : "-" }}"
                                            data-status="{{ !empty(data_get($school, 'status')) ?  data_get($school, 'status')  : "-" }}"
                                            title="@lang('Edit Department')"
                                            data-toggle="tooltip" data-placement="top">
                                            <i class="fas fa-edit"></i>
                                        </button>

                                        <a href="{{ route('super.departments.destroy', $school) }}"
                                           class="btn btn-icon js-remove-list-item"
                                           title="@lang('Delete Department')"
                                           data-toggle="tooltip"
                                           data-placement="top"
                                           data-method="DELETE"
                                           data-url = "{{ route('super.departments.destroy', $school) }}"
                                           data-confirm-title="@lang('Please Confirm')"
                                           data-confirm-text="@lang('Are you sure that you want to delete this department?')"
                                           data-confirm-delete="@lang('Yes, delete!')">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <thead>
                            <tr>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td style="border-bottom: none; text-align: center" colspan="5">No departments to show
                                </td>
                            </tr>
                            @endif
                            </tbody>
                    </table>
                </div>
                <div id="activeschools" class="table-data all-schools none">
                    <table>
                        @if(count($activeschools) > 0)
                            <thead>
                            <tr>
                                <th>Title</th>
                                <th>Status</th>
                                <th>Date added</th>
                                <th class="text-center align-middle">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($activeschools as $school)
                                <tr>
                                    <td>{{ !empty(data_get($school, 'title')) ?  data_get($school, 'title')  : "-" }}</td>
                                    <td>{{ !empty(data_get($school, 'status')) ?  (data_get($school, 'status') ? "Active": "Inactive")  : "Inactive" }}</td>
                                    <td>{{ !empty(show_date($school->created_at)) ?  show_date($school->created_at)  : "-" }}</td>
                                    <td class="text-center align-middle">
                                        <button
                                            id="editDepartmentBtn"
                                            class="btn btn-icon edit" data-modal-target="#edit-career"
                                            data-id="{{ !empty(data_get($school, 'id')) ?  data_get($school, 'id')  : "-" }}"
                                            data-title="{{ !empty(data_get($school, 'title')) ?  data_get($school, 'title')  : "-" }}"
                                            data-status="{{ !empty(data_get($school, 'status')) ?  data_get($school, 'status')  : "-" }}"
                                            title="@lang('Edit Department')"
                                            data-toggle="tooltip" data-placement="top">
                                            <i class="fas fa-edit"></i>
                                        </button>

                                        <a href="{{ route('super.departments.destroy', $school) }}"
                                           class="btn btn-icon js-remove-list-item"
                                           title="@lang('Delete Department')"
                                           data-toggle="tooltip"
                                           data-placement="top"
                                           data-method="DELETE"
                                           data-url = "{{ route('super.departments.destroy', $school) }}"
                                           data-confirm-title="@lang('Please Confirm')"
                                           data-confirm-text="@lang('Are you sure that you want to delete this department?')"
                                           data-confirm-delete="@lang('Yes, delete!')">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <thead>
                            <tr>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td style="border-bottom: none; text-align: center" colspan="5">No departments to show
                                </td>
                            </tr>
                            @endif
                            </tbody>
                    </table>
                </div>
                <div id="inactiveschools" class="table-data all-schools none">
                    <table>
                        @if(count($inactiveschools) > 0)
                            <thead>
                            <tr>
                                <th>Title</th>
                                <th>Status</th>
                                <th>Date added</th>
                                <th class="text-center align-middle">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($inactiveschools as $school)
                                <tr>
                                    <td>{{ !empty(data_get($school, 'title')) ?  data_get($school, 'title')  : "-" }}</td>
                                    <td>{{ !empty(data_get($school, 'status')) ?  (data_get($school, 'status') ? "Active": "Inactive")  : "Inactive" }}</td>
                                    <td>{{ !empty(show_date($school->created_at)) ?  show_date($school->created_at)  : "-" }}</td>
                                    <td class="text-center align-middle">
                                        <button
                                            id="editDepartmentBtn"
                                            class="btn btn-icon edit" data-modal-target="#edit-career"
                                            data-id="{{ !empty(data_get($school, 'id')) ?  data_get($school, 'id')  : "-" }}"
                                            data-title="{{ !empty(data_get($school, 'title')) ?  data_get($school, 'title')  : "-" }}"
                                            data-status="{{ !empty(data_get($school, 'status')) ?  data_get($school, 'status')  : "-" }}"
                                            title="@lang('Edit Department')"
                                            data-toggle="tooltip" data-placement="top">
                                            <i class="fas fa-edit"></i>
                                        </button>

                                        <a href="{{ route('super.departments.destroy', $school) }}"
                                           class="btn btn-icon js-remove-list-item"
                                           title="@lang('Delete Department')"
                                           data-toggle="tooltip"
                                           data-placement="top"
                                           data-method="DELETE"
                                           data-url = "{{ route('super.departments.destroy', $school) }}"
                                           data-confirm-title="@lang('Please Confirm')"
                                           data-confirm-text="@lang('Are you sure that you want to delete this department?')"
                                           data-confirm-delete="@lang('Yes, delete!')">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <thead>
                            <tr>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td style="border-bottom: none; text-align: center" colspan="5">No departments to show
                                </td>
                            </tr>
                            @endif
                            </tbody>
                    </table>
                </div>

            </div>
        </div>

        <div id="add-school" class="addnew-modal">
            <div class="cl">
                <div id="close-school-modal" class="x-cancel close-modal-btn">
                    <span class="material-icons-sharp">close</span>
                    <h5 style="display: inline">Close</h5>
                </div>

                <h1>Add New Department</h1>
            </div>

            <div class="input mt-30">
                @include('layouts.partials.messages')
                <form action="{{route("super.departments.addnew")}}" method="POST" class="form-careers-add js-ajax-form"
                      id="form-careers-add">
                    <div class="school-details">
                        <div class="row">
                            <div class="intro">
                                <input
                                    type="text"
                                    class="intro_input"
                                    placeholder=" "
                                    name="title"
                                    id=""
                                />
                                <label for="name" class="intro_label">Department Title*</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="intro">
                                <select name="status" id="">
                                    <option value="0">Inactive</option>
                                    <option value="1">Active</option>
                                </select>
                                <label for="email" class="intro_label"
                                >Select Status*</label>
                            </div>
                        </div>

                        <div class="row">
                            <button type="submit" form="form-careers-add" class="formsubmitbtn editbtn">Add New
                            </button>
                            <button type="reset" form="form-careers-add" class="formsubmitbtn more">Clear</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>

        <div id="edit-career" class="addnew-modal">
            <div class="cl">
                <div id="close-school-modal" class="x-cancel close-modal-btn">
                    <span class="material-icons-sharp">close</span>
                    <h5 style="display: inline">Close</h5>
                </div>

                <h1>Edit Department</h1>
            </div>
            <div class="input mt-30">
                @include('layouts.partials.messages')
                <form action="{{ route('super.departments.update') }}" class="form form-careers-edit js-ajax-form"
                      id="form-careers-edit" method="PUT">
                    @csrf
                    <div class="form-result"></div>
                    <div class="career-details">
                        <div class="row">
                            <div class="intro">
                                <input type="text" hidden name="id" id="departmentId_edit"/>
                            </div>
                        </div>

                        <div class="row">
                            <div class="intro">
                                <input
                                    type="text"
                                    class="intro_input"
                                    placeholder=" "
                                    required
                                    name="title"
                                    id="departmentTitle_edit"
                                />
                                <label for="" class="intro_label">Department Title*</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="intro">
                                <select name="status" id="departmentStatus_edit">
                                    <option value="0">Inactive</option>
                                    <option value="1">Active</option>
                                </select>
                                <label for="email" class="intro_label"
                                >Select Status*</label>
                            </div>
                        </div>

                        <div class="row">
                            <button type="submit" form="form-careers-edit" class="formsubmitbtn editbtn">Edit</button>
                            <button type="reset" form="form-careers-edit" class="formsubmitbtn more">Clear</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </main>
@endsection