@extends('layouts.superadmin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Schools</title>


@section('main-content')
    <style>
        .edit:hover {
            color: #fff !important;
            background-color: blue !important;
            border-color: #696cff !important;
            border-radius: 5px !important;
        }

        .delete:hover {
            color: #fff !important;
            background-color: #E3242B !important;
            border-color: #E3242B !important;
            border-radius: 5px !important;
        }

        .dtbl_dropdown .dataTables_length {
            width: 65px;
        }

        .dtbl_dropdown .dataTables_length label {
            width: 100%;
        }

        .content {
            /* display: flex; */
            flex-wrap: wrap;
        }

        table.dataTable thead .sorting_asc {
            background-image: none !important;
        }

        table.dataTable thead .sorting {
            background-image: none !important;
        }
    </style>

    <style>
        /* Popup container */
        .popup {
            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 1100;
            /* Sit on top */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgba(0, 0, 0, 0.4);
            /* Black w/ opacity */
        }

        /* Popup content */
        .popup-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        /* Close button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <style>
        .ribbon-label {
            position: absolute;
            top: -5px;
            left: 30px;
            background: #ffc107;
            color: #000;
            font-size: 12px;
            font-weight: bold;
            padding: 2px 8px;
            clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
            white-space: nowrap;
        }

        .ribbon-label.live {
            background: #28a745;
            color: white;
        }

        .ribbon-label.test {
            background: #ffc107;
            color: black;
        }
        .ribbon-label:empty {
    display: none;
}

    </style>

    <div class="{{ Session::has('success') ? '' : 'd-none' }} hide_msg_class"
        style="position: absolute; top:12%; margin-left:1%;">
        <div id="alert">
            @if (Session::has('success'))
                <div class="alert {{ Session::get('success') == 'Notification deleted successfully.' ? 'alert-danger' : 'alert-success' }}"
                    role="alert">
                    {{ Session::get('success') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>

    <!-- The popup container -->
    <div id="popup" class="popup">
        <!-- Popup content -->
        <div class="popup-content">
            <span class="close" onclick="closePopup()">&times;</span>
            <h4 class="announcement_head_popup"></h4>
            <p class="announcement_content_popup"></p>
        </div>
    </div>

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl container-p-y row">
            <div class="col-6">
                <h4 class="fw-bold py-3 mb-2"><span class="text-muted fw-light">Records /</span> School </h4>
            </div>
            <div class="col-6">
                <div class="text-end upgrade-btn">
                    <a href="/super-admin/add-school" class="btn btn-primary text-white">Add New
                        School</a>
                </div>
            </div>

            <!-- Basic Bootstrap Table -->
            <div class="card ms-3 pb-4">
                <h5 class="mt-3 mb-3">School List</h5>
                <div class="table dataTable text-nowrap dtbl_dropdown">
                    <table class="table" id="services">
                        <thead>
                            <tr>
                                <th class="ps-1">S.No</th>
                                <th class="ps-1">School Name</th>
                                <th class="ps-1">School Admin Email</th>
                                <th class="ps-1">Address</th>
                                <th class="ps-1">Date</th>
                                <th class="ps-1">Status</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @if (count($schools) != 0)
                                @foreach ($schools as $key => $school)
                                    <tr id="row_{{ $school->id }}">
                                        <td class="ps-1 position-relative">
                                            {{ $key + 1 }}
                                            <div id="ribbon-{{ $school->id }}" class="ribbon-label"></div>
                                        </td>
                                        <td class="ps-1">{{ ucwords($school->name) }}
                                        </td>
                                        @if (isset($school->user->email))
                                            <td class="ps-1">{{ ucwords($school->user->email) }}</td>
                                        @else
                                            <td class="ps-1">Not Assigned</td>
                                        @endif
                                        <td class="ps-1">{{ $school->address }}</td>
                                        <td class="ps-1" style="white-space: nowrap;">
                                            {{ $school->created_at->format('d/m/Y') }}</td>
                                        <td class="text-center">
                                            @if ($school->status == 'active')
                                                <a style="color:white; background:green"
                                                    class="btn btn-secondary btn-rounded edit-service text-nowrap"
                                                    href="/super-admin/deactivate-school/{{ $school->id }}">
                                                    {{ ucwords($school->status) }}</a>
                                            @else
                                                <a style="color:white; background:#e69b00"
                                                    class="btn btn-secondary btn-rounded edit-service text-nowrap"
                                                    href="/super-admin/activate-school/{{ $school->id }}">
                                                    {{ ucwords($school->status) }}</a>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            <div class="dropdown">
                                                <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                                                    data-bs-toggle="dropdown">
                                                    <i class="bx bx-dots-vertical-rounded"></i>
                                                </button>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item edit"
                                                        href="/super-admin/edit-school/{{ $school->id }}"><i
                                                            class="bx bx-edit-alt me-1"></i> Edit</a>
                                                    <a class="dropdown-item edit"
                                                        href="/super-admin/school-Details/{{ $school->id }}"><i
                                                            class="bx bx-cog me-1"></i>School Settings</a>
                                                    <form method="POST"
                                                        action="/super-admin/delete-school/{{ $school->id }}"
                                                        style="display: inline;">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="dropdown-item delete"
                                                            onclick="return confirm('Are you sure you want to remove this student?');">
                                                            <i class="bx bx-trash me-1"></i> Delete
                                                        </button>
                                                    </form>
                                                    @if (isset($school->user->email))
                                                        @canImpersonate($guard = null)
                                                        <a class="dropdown-item"
                                                            href="{{ route('impersonate', $school->user->id) }}"><i
                                                                class="bx bx-walk me-1"></i>
                                                            Log In as School Admin
                                                        </a>
                                                        @endCanImpersonate
                                                    @endif
                                                    <li>
                                                        <a class="dropdown-item mark-school" href="#"
                                                            data-school-id="{{ $school->id }}" data-status="test">
                                                            <i class="bx bxs-bug text-warning me-1"></i> Mark as Test
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item mark-school" href="#"
                                                            data-school-id="{{ $school->id }}" data-status="live">
                                                            <i class="bx bxs-check-circle text-success me-1"></i> Mark as
                                                            Live
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item mark-school" href="#"
                                                            data-school-id="{{ $school->id }}" data-status="clear">
                                                            <i class="bx bx-x text-danger me-1"></i> Clear Mark
                                                        </a>
                                                    </li>

                                                </div>
                                            </div>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="3"><span>No school found</span></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- / Content -->
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        function openPopup() {
            document.getElementById("popup").style.display = "block";
        }

        // Function to close the popup
        function closePopup() {
            document.getElementById("popup").style.display = "none";
        }

        $(".view_class").on("click", function(e) {
            e.preventDefault();
            openPopup();
            $('.announcement_head_popup').text($(this).data('title'));
            $('.announcement_content_popup').text($(this).data('content'));
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Load ribbon status from localStorage on page load
            document.querySelectorAll('[id^="ribbon-"]').forEach(div => {
                const schoolId = div.id.split('-')[1];
                const status = localStorage.getItem(`school-status-${schoolId}`);

                if (status === 'test') {
                    div.className = 'ribbon-label test';
                    div.innerText = 'Test';
                } else if (status === 'live') {
                    div.className = 'ribbon-label live';
                    div.innerText = 'Live';
                }
            });

            // Handle dropdown clicks to set Test/Live/Clear
            document.querySelectorAll('.mark-school').forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    const schoolId = this.dataset.schoolId;
                    const status = this.dataset.status;
                    const ribbon = document.getElementById(`ribbon-${schoolId}`);

                    if (status === 'test') {
                        ribbon.className = 'ribbon-label test';
                        ribbon.innerText = 'Test';
                        localStorage.setItem(`school-status-${schoolId}`, 'test');
                    } else if (status === 'live') {
                        ribbon.className = 'ribbon-label live';
                        ribbon.innerText = 'Live';
                        localStorage.setItem(`school-status-${schoolId}`, 'live');
                    } else if (status === 'clear') {
                        ribbon.innerText = '';
                        ribbon.className = 'ribbon-label';
                        localStorage.removeItem(`school-status-${schoolId}`);
                    }
                });
            });
        });
    </script>


@endsection