@extends('layouts.master')
@section('title', 'Schools')
@section('pagetitle', 'List of Schools')
@section('styles')
    <style>
        .table-data {
            margin-bottom: 20px;
        }

        .pagination-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

        .per-page-dropdown {
            margin-left: 15px;
        }

        .pagination-links {
            margin-right: 15px;
        }


        .subHeading .rightsub {
            display: flex;
            align-items: center;
        }

        .subHeading .rightsub .search-form-container {
            display: flex;
            align-items: center;
            margin-right: 10px;
        }

        .subHeading .rightsub .search-form {
            display: flex;
            align-items: center;
        }

        .subHeading .rightsub .search-form input[type="text"] {
            margin-right: 10px;
        }

        .subHeading .rightsub .ml-10 {
            display: flex;
            align-items: center;
            margin-left: 10px;
        }

        .subHeading .rightsub .ml-10 button {
            margin-left: 10px;
            vertical-align: top;
        }

        button[type="submit"] {
            height: 40px; /* Match the height of import/export buttons */
            width: 100px; /* Match the width of import/export buttons */
            vertical-align: top; /* Align vertically with import/export buttons */
            margin-left: 10px; /* Adjust spacing as needed */
        }

        /* Adjust the search input */
        input[type="text"] {
            height: 40px; /* Match the height of the buttons */
            width: 300px; /* Set a width that fits the UI */
            box-sizing: border-box; /* Ensure padding and borders are included in the width and height */
            vertical-align: top; /* Align vertically with the buttons */
        }



    </style>
@endsection

@section('content')
    <main>
        <div class="main">
            <div class="student mb-60">
                <div class="header mb-30">
                    <h1 class="hd">Schools</h1>
                    <button
                        id="addschoolBtn" data-modal-target="#add-school" class="start">
                        <span class="material-icons-sharp">add</span> Add new School
                    </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-form-container">
                            <form action="{{ route('super.schools.list') }}" method="GET" class="search-form">
                                <input type="text" name="search" placeholder="Search..." value="{{ request('search') }}">
                                <button type="submit"  class="start">Search</button>
                            </form>
                        </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>
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Contact email</th>
                            <th>Admin name</th>
                            <th>Admin email</th>
                            <th>Status</th>
                            <th>Date added</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        @if(count($schools) > 0)
                            <tbody>
                            @foreach($schools as $school)
                                <tr>
                                    <td>{{ !empty(data_get($school, 'name')) ?  data_get($school, 'name')  : "-" }}</td>
                                    <td>{{ !empty(data_get($school, 'contact_email')) ?  data_get($school, 'contact_email')  : "-" }}</td>
                                    <td>{{ !empty(data_get($school, 'admin_name')) ?  data_get($school, 'admin_name')  : "-" }}</td>
                                    <td>{{ !empty(data_get($school, 'admin_email')) ?  data_get($school, 'admin_email')  : "-" }}</td>
                                    <td>{{ !empty(data_get($school, 'status')) ?  'Active' : 'Inactive' }}</td>
                                    <td>{{ !empty(show_date($school->created_at)) ?  show_date($school->created_at)  : "-" }}</td>
                                    <td class="text-center align-middle">
                                        <button
                                            id="editSchoolBtn"
                                            class="btn btn-icon edit" data-modal-target="#edit-career"
                                            data-id="{{ !empty(data_get($school, 'id')) ?  data_get($school, 'id')  : "-" }}"
                                            data-avatar="{{ $initialImageSrc = $school->present()->avatar ? $school->present()->avatar : "" }}"
                                            data-status="{{ !empty(data_get($school, 'status')) ?  data_get($school, 'status')  : 0 }}"
                                            data-name="{{ !empty(data_get($school, 'name')) ?  data_get($school, 'name')  : "-" }}"
                                            data-contact_email="{{ !empty(data_get($school, 'contact_email')) ?  data_get($school, 'contact_email')  : "-" }}"
                                            data-admin_name="{{ !empty(data_get($school, 'admin_name')) ?  data_get($school, 'admin_name')  : "-" }}"
                                            data-admin_email="{{ !empty(data_get($school, 'admin_email')) ?  data_get($school, 'admin_email')  : "-" }}"
                                            title="@lang('Edit Plan')"
                                            data-toggle="tooltip" data-placement="top">
                                            <i class="fas fa-edit"></i>
                                        </button>

                                        <a href="{{ route('super.schools.destroy', $school) }}"
                                           class="btn btn-icon js-remove-list-item"
                                           title="@lang('Delete School')"
                                           data-toggle="tooltip"
                                           data-placement="top"
                                           data-method="DELETE"
                                           data-url = "{{ route('super.schools.destroy', $school) }}"
                                           data-confirm-title="@lang('Please Confirm')"
                                           data-confirm-text="@lang('Are you sure that you want to delete this school?')"
                                           data-confirm-delete="@lang('Yes, delete!')">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        @else
                            <tbody>
                            <tr>
                                <td style="border-bottom: none; text-align: center" colspan="5">No schools to show</td>
                            </tr>
                            </tbody>
                        @endif
                    </table>
                    <div class="pagination-container">
                        <div class="per-page-dropdown">
                            <form action="{{ route('super.schools.list') }}" method="GET">
                                <select name="perPage" onchange="this.form.submit()">
                                    <option value="10" {{ request('perPage') == 10 ? 'selected' : '' }}>10</option>
                                    <option value="20" {{ request('perPage') == 20 ? 'selected' : '' }}>20</option>
                                    <option value="50" {{ request('perPage') == 50 ? 'selected' : '' }}>50</option>
                                </select>
                            </form>
                        </div>
                        <div class="pagination-links">
                            {{ $schools->links() }}
                        </div>
                    </div>
                </div>
                <div id="activeschools" class="table-data all-schools none">
                    <table>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Contact email</th>
                                <th>Admin name</th>
                                <th>Admin email</th>
                                <th>Date added</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        @if(count($activeschools) > 0)
                            <tbody>
                            @foreach($activeschools as $school)
                                <tr>
                                    <td>{{ !empty(data_get($school, 'name')) ?  data_get($school, 'name')  : "-" }}</td>
                                    <td>{{ !empty(data_get($school, 'contact_email')) ?  data_get($school, 'contact_email')  : "-" }}</td>
                                    <td>{{ !empty(data_get($school, 'admin_name')) ?  data_get($school, 'admin_name')  : "-" }}</td>
                                    <td>{{ !empty(data_get($school, 'admin_email')) ?  data_get($school, 'admin_email')  : "-" }}</td>
                                    <td>{{ !empty(show_date($school->created_at)) ?  show_date($school->created_at)  : "-" }}</td>
                                    <td class="text-center align-middle">
                                        <button
                                            id="editSchoolBtn"
                                            class="btn btn-icon edit" data-modal-target="#edit-career"
                                            data-id="{{ !empty(data_get($school, 'id')) ?  data_get($school, 'id')  : "-" }}"
                                            data-avatar="{{ $initialImageSrc = $school->present()->avatar ? $school->present()->avatar : "" }}"
                                            data-name="{{ !empty(data_get($school, 'name')) ?  data_get($school, 'name')  : "-" }}"
                                            data-contact_email="{{ !empty(data_get($school, 'contact_email')) ?  data_get($school, 'contact_email')  : "-" }}"
                                            data-admin_name="{{ !empty(data_get($school, 'admin_name')) ?  data_get($school, 'admin_name')  : "-" }}"
                                            data-admin_email="{{ !empty(data_get($school, 'admin_email')) ?  data_get($school, 'admin_email')  : "-" }}"
                                            title="@lang('Edit Plan')"
                                            data-toggle="tooltip" data-placement="top">
                                            <i class="fas fa-edit"></i>
                                        </button>

                                        <a href="{{ route('super.schools.destroy', $school) }}"
                                           class="btn btn-icon js-remove-list-item"
                                           title="@lang('Delete Plan')"
                                           data-toggle="tooltip"
                                           data-placement="top"
                                           data-method="DELETE"
                                           data-url = "{{ route('super.schools.destroy', $school) }}"
                                           data-confirm-title="@lang('Please Confirm')"
                                           data-confirm-text="@lang('Are you sure that you want to delete this school?')"
                                           data-confirm-delete="@lang('Yes, delete!')">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        @else
                            <tbody>
                            <tr>
                                <td style="border-bottom: none; text-align: center" colspan="5">No schools to show</td>
                            </tr>
                            </tbody>
                        @endif
                    </table>
                    <div class="pagination-container">
                        <div class="per-page-dropdown">
                            <form action="{{ route('super.schools.list') }}" method="GET">
                                <select name="perPage" onchange="this.form.submit()">
                                    <option value="10" {{ request('perPage') == 10 ? 'selected' : '' }}>10</option>
                                    <option value="20" {{ request('perPage') == 20 ? 'selected' : '' }}>20</option>
                                    <option value="50" {{ request('perPage') == 50 ? 'selected' : '' }}>50</option>
                                </select>
                            </form>
                        </div>
                        <div class="pagination-links">
                            {{ $activeschools->links() }}
                        </div>
                    </div>
                </div>
                <div id="inactiveschools" class="table-data all-schools none">
                    <table>
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Contact email</th>
                            <th>Admin name</th>
                            <th>Admin email</th>
                            <th>Date added</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        @if($inactiveSchoolsCnt > 0)
                            <tbody>
                            @foreach($inactiveschools as $school)
                                <tr>
                                    <td>{{ !empty(data_get($school, 'name')) ?  data_get($school, 'name')  : "-" }}</td>
                                    <td>{{ !empty(data_get($school, 'contact_email')) ?  data_get($school, 'contact_email')  : "-" }}</td>
                                    <td>{{ !empty(data_get($school, 'admin_name')) ?  data_get($school, 'admin_name')  : "-" }}</td>
                                    <td>{{ !empty(data_get($school, 'admin_email')) ?  data_get($school, 'admin_email')  : "-" }}</td>
                                    <td>{{ !empty(show_date($school->created_at)) ?  show_date($school->created_at)  : "-" }}</td>
                                    <td class="text-center align-middle">
                                        <button
                                            id="editSchoolBtn"
                                            class="btn btn-icon edit" data-modal-target="#edit-career"
                                            data-id="{{ !empty(data_get($school, 'id')) ?  data_get($school, 'id')  : "-" }}"
                                            data-avatar="{{ $initialImageSrc = $school->present()->avatar ? $school->present()->avatar : "" }}"
                                            data-name="{{ !empty(data_get($school, 'name')) ?  data_get($school, 'name')  : "-" }}"
                                            data-contact_email="{{ !empty(data_get($school, 'contact_email')) ?  data_get($school, 'contact_email')  : "-" }}"
                                            data-admin_name="{{ !empty(data_get($school, 'admin_name')) ?  data_get($school, 'admin_name')  : "-" }}"
                                            data-admin_email="{{ !empty(data_get($school, 'admin_email')) ?  data_get($school, 'admin_email')  : "-" }}"
                                            title="@lang('Edit Plan')"
                                            data-toggle="tooltip" data-placement="top">
                                            <i class="fas fa-edit"></i>
                                        </button>

                                        <a href="{{ route('super.schools.destroy', $school) }}"
                                           class="btn btn-icon js-remove-list-item"
                                           title="@lang('Delete Plan')"
                                           data-toggle="tooltip"
                                           data-placement="top"
                                           data-method="DELETE"
                                           data-url = "{{ route('super.schools.destroy', $school) }}"
                                           data-confirm-title="@lang('Please Confirm')"
                                           data-confirm-text="@lang('Are you sure that you want to delete this school?')"
                                           data-confirm-delete="@lang('Yes, delete!')">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            <tbody>
                        @else
                            <tbody>
                            <tr>
                                <td style="border-bottom: none; text-align: center" colspan="5">No schools to show</td>
                            </tr>
                            </tbody>
                        @endif
                    </table>
                    <div class="pagination-container">
                        <div class="per-page-dropdown">
                            <form action="{{ route('super.schools.list') }}" method="GET">
                                <select name="perPage" onchange="this.form.submit()">
                                    <option value="10" {{ request('perPage') == 10 ? 'selected' : '' }}>10</option>
                                    <option value="20" {{ request('perPage') == 20 ? 'selected' : '' }}>20</option>
                                    <option value="50" {{ request('perPage') == 50 ? 'selected' : '' }}>50</option>
                                </select>
                            </form>
                        </div>
                        <div class="pagination-links">
                            {{ $inactiveschools->links() }}
                        </div>
                    </div>
                </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 School</h1>
                <div class="profileImg">

                    <img id="schoolAvatar_add"
                         src="{{ $initialImageSrc = url('assets/img/college.png') }}"
                         alt=""/>
                    <div>
                        <button class="save" id="fileLink-add">Choose</button>
                        <button class="cancel" id="remove-image-add">Remove</button>
                    </div>
                </div>
            </div>
            <div class="input mt-30">
                @include('layouts.partials.messages')
                <form action="{{ route('super.schools.addnew') }}" class="form form-careers-edit js-ajax-form"
                      method="POST">
                    @csrf

                    <input type="file" name="avatar" id="fileInput-add" style="display: none;">
                    <div class="form-result"></div>
                    <div class="career-details">
                        <div class="">
                            <div class="intro">
                                <input
                                    type="text"
                                    class="intro_input"
                                    placeholder=" "
                                    required
                                    name="name"
                                />
                                <label for="" class="intro_label">School Name*</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="intro">
                                <input
                                    type="email"
                                    class="intro_input"
                                    placeholder=" "
                                    required
                                    name="contact_email"
                                />
                                <label for="" class="intro_label">Contact Email*</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="intro">
                                <input
                                    type="email"
                                    class="intro_input"
                                    placeholder=" "
                                    required
                                    name="admin_email"
                                />
                                <label for="" class="intro_label">Admin Email*</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="intro">
                                <input
                                    type="text"
                                    class="intro_input"
                                    placeholder=" "
                                    required
                                    name="admin_name"
                                />
                                <label for="" class="intro_label">Admin Name*</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group">
                                <div class="row" style="align-content: flex-start">
                                    <div class="col-2">
                                        <div class="switch">
                                            <input type="hidden" value="0" name="status">
                                            {!! Form::checkbox('status', 1, '', ['class' => 'switch', 'id' => 'switch-status']) !!}
                                            <label for="switch-status"></label>
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <label for="description">@lang('status')</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <button type="submit" class="formsubmitbtn editbtn">Add School</button>
                            <button type="reset" form="form-careers-edit" 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 School</h1>

                <div class="profileImg">

                    <img id="schoolAvatar_edit"
                         src=""
                         alt=""/>
                    <div>
                        <button class="save" id="fileLink-edit">Choose</button>
                        <button class="cancel" id="remove-image-edit">Remove</button>
                    </div>
                </div>

            </div>
            <div class="input mt-30">
                @include('layouts.partials.messages')
                <form action="{{ route('super.schools.update') }}" class="form form-careers-edit js-ajax-img-form"
                      id="form-careers-edit" method="POST">
                    @method('PUT')
                    @csrf
                    <input type="file" name="avatar" id="fileInput-edit" style="display: none;">
                    <div class="form-result"></div>
                    <div class="career-details">
                        <div class="row">
                            <div class="intro">
                                <input type="text" hidden name="id" id="schoolId_edit"/>
                            </div>
                        </div>

                        <div class="row">
                            <div class="intro">
                                <input
                                    type="text"
                                    class="intro_input"
                                    required
                                    name="name"
                                    id="schoolName_edit"
                                />
                                <label for="" class="intro_label">School Name*</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="intro">
                                <input
                                    type="email"
                                    class="intro_input"
                                    required
                                    name="contact_email"
                                    id="schoolContactEmail_edit"
                                />
                                <label for="" class="intro_label">Contact Email*</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="intro">
                                <input
                                    type="email"
                                    class="intro_input"
                                    required
                                    name="admin_email"
                                    id="schoolAdminEmail_edit"
                                />
                                <label for="" class="intro_label">Admin Email*</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="intro">
                                <input
                                    type="text"
                                    class="intro_input"
                                    required
                                    name="admin_name"
                                    id="schoolAdminName_edit"
                                />
                                <label for="" class="intro_label">Admin Name*</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group">
                                <div class="row" style="align-content: flex-start">
                                    <div class="col-2">
                                        <div class="switch">
                                            <input type="hidden" value="0" name="status">
                                            {!! Form::checkbox('status', 1, '', ['class' => 'switch', 'id' => 'schoolStatus_edit']) !!}
                                            <label for="schoolStatus_edit"></label>
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <label for="schoolStatus_edit">@lang('status')</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <button type="submit" form="form-careers-edit" class="formsubmitbtn editbtn">Edit School</button>
                            <button type="reset" form="form-careers-edit" class="formsubmitbtn more">Clear</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </main>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            const $fileLink = $('#fileLink-edit');
            const $fileInput = $('#fileInput-edit');
            const $profileImageEdit = $('#schoolAvatar_edit');
            const $removeImageBtn = $('#remove-image-edit');
            const initialImageSrc = '{{ $initialImageSrc }}';

            $removeImageBtn.hide();

            $fileLink.on('click', function(event) {
                event.preventDefault();
                $fileInput.click();
            });

            $fileInput.on('change', function() {
                if ($fileInput[0].files.length > 0) {
                    const selectedFile = $fileInput[0].files[0];
                    const objectUrl = URL.createObjectURL(selectedFile);
                    $profileImageEdit.attr('src', objectUrl);
                    $removeImageBtn.show();
                }
            });

            $removeImageBtn.on('click', function() {
                $profileImageEdit.attr('src', initialImageSrc);
                $fileInput.val('');
                $removeImageBtn.hide();
            });
        });
    </script>
@endsection