@extends('layouts.dashboard')
@section('nav-top-left')
    @foreach (Auth::user()->getActiveRolesForCall($call) as $role)
        <div class="pill-role">
            <i class="fa fa-user"></i> {{ $role->view_name }}
        </div>
    @endforeach
    <div class="page-title">Manage Panels</div>
    <div class="page-subtitle">Create Panels</div>
@endsection
@section('nav-bottom-left')
    <ul>
        <li class=""><a href="{{route('dashboard')}}"><i class="fas fa-chart-pie"></i> Dashboard</a></li>
        <li class=""><a href="{{route('call.view', ['call' => $call->hash_id])}}"><i class="fas fa-list-ul"></i> Admin Area</a></li>
        <li class="active"><a href="#"><i class="fas fa-layer-group"></i> Manage Panels</a></li>
    </ul>
@endsection
@section('nav-bottom-right')
    <div class="sum-proposals"><i class="fas fa-book"></i> <span>{{$panels->sum(fn ($panel) => $panel->proposals->count()) }}</span> / {{count($call->proposals) . ' proposals assigned to Panels'}}</div>
@endsection
@section('content')
    <div class="cards-list container-fluid">
        <div class="row">
            @if($panels->sum(fn ($panel) => $panel->proposals->count()) !== count($call->proposals))
            <div class="main-card col-sm-12 col-lg-4 create">
                <div class="main-card--inner">
                    <a href="{{route('panel.create', ['call' => $call])}}"  style="text-decoration: none">
                        <div class="main-card--add">
                            <div class="main-card--add---plus"><i class="fas fa-plus"></i></div>
                            <div class="main-card--add---create">
                                Create Panel
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            @endif
            @foreach($panels as $panel)
                <div class="main-card col-sm-12 col-lg-4 ongoing">
                    <div class="main-card--inner">
                        <div class="main-card--top">
                            <div class="main-card--top---title">

                                    <h3> <a href="{{route('view.panel', ['call'=> $call->hash_id, 'panel_id' => $panel->id])}}">{{$panel->name}}</a></h3>

                                <span class="domain">Domain: {{$panel->domain->view_name_en}}</span>
                            </div>
                            <div class="main-card--top---options dropdown">
                                <div class="dropdown">
                                    <div class="options-toggler" href="#" id="dropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></div>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                        <li>
                                            <a class="dropdown-item" href="{{route('view.panel', ['call'=> $call->hash_id, 'panel_id' => $panel->id])}}">View Panel</a>
                                        </li>
                                        <li><a class="dropdown-item" href="{{route('panel.edit', ['call'=> $call->hash_id, 'panel' => $panel->hash_id])}}">Edit Panel</a></li>
                                        <li>
                                            <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#delete-{{$panel->id}}" title="Delete Panel" href="#">
                                                Delete Panel
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <form method="POST" action="{{ route('delete.panel', ['call'=>$call,'panel' => $panel]) }}" accept-charset="UTF-8" id="form-delete-{{$panel->id}}" style="display:inline-block">
                                @csrf
                                <div class="modal fade" id="delete-{{$panel->id}}" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header bg-red">
                                                <h3 class="modal-title">Permanently delete</h3>
                                                <button type="button" class="btn-close text-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="icon text-center">
                                                    <i class="fas fa-trash-alt text-red text-center" style="font-size:50px;"></i>
                                                </div>
                                                <h6 class="text-center text-bold mt-3">Are you sure you want to delete this Panel?</h6>
                                                <p class="text-center">{{$panel->name}}</p>
                                            </div>
                                            <div class="modal-footer">
                                                <div class="col-xs-6">
                                                    <div class="col-xs-6"><button type="button" class="btn btn-warning" data-bs-dismiss="modal">Cancel</button></div>
                                                </div>
                                                <div class="col-xs-6">
                                                    <input type="submit" value="Delete" class="btn btn-danger" id="confirm-{{$panel->id}}" form="form-delete-{{$panel->id}}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>

                            <div class="main-card--top---status"></div>
                        </div>
                        <div class="main-card--middle no-border">
                            <div class="main-card--middle---description"></div>
                        </div>
                        <div class="main-card--bottom">
                            <div class="panel_chair">Panel Chair: {{$panel->panelChair->fullname}}

                            </div>
                            <div class="submissions-bottom">
                                <div class="submissions-count">
                                    <div class="submissions-count--counter">
                                        <span>{{$panel->proposals->count()}}</span> proposals
                                    </div>
                                </div>
                                <div class="end-date"></div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <div class="cards-list container-fluid">
        <div class="row">



        </div>
    </div>
@endsection
@section('javascripts')
    <script>
        $p = jQuery.noConflict();
        $p(document).ready(function () {

            // Move modals out to <body> so card overflow/transform can't clip them
            $p('.main-card .modal').appendTo('body');

            // Dropdown toggle (your existing logic)
            $p('.options-toggler').on('click', function (e) {
                e.stopPropagation();
                var $menu = $p(this).closest('.dropdown').find('.dropdown-menu');
                var willOpen = !$menu.hasClass('show');

                // close every other open menu first
                $p('.dropdown-menu.show').not($menu).removeClass('show');

                $menu.toggleClass('show', willOpen);

                if (willOpen) {
                    $menu.css({ left: '', right: '' });
                    var rect = $menu[0].getBoundingClientRect();
                    if (rect.right > window.innerWidth) {
                        $menu.css({ left: 'auto', right: '0' });
                    }
                }
            });

// click anywhere outside closes all menus
            $p(document).on('click', function (e) {
                if (!$p(e.target).closest('.dropdown').length) {
                    $p('.dropdown-menu.show').removeClass('show');
                }
            });
            $p(document).on('click', function () {
                $p('.dropdown-menu').removeClass('show');
            });

            // Open modal
            $p('[data-bs-toggle="modal"]').on('click', function (e) {
                e.preventDefault();
                openModal($p(this).attr('data-bs-target'));
            });

            // Close modal (X button / Cancel)
            $p(document).on('click', '[data-bs-dismiss="modal"]', function () {
                closeModal($p(this).closest('.modal'));
            });

            function openModal(selector) {
                var $m = $p(selector);
                if (!$m.length) return;
                $p('<div class="modal-backdrop fade show"></div>').appendTo('body');
                $m.css('display', 'block').addClass('show').attr('aria-hidden', 'false');
                $p('body').addClass('modal-open');
                $m.off('click.bd').on('click.bd', function (e) {
                    if (e.target === this) closeModal($m); // click outside dialog
                });
            }

            function closeModal($m) {
                $m.removeClass('show').css('display', 'none').attr('aria-hidden', 'true');
                $p('body').removeClass('modal-open');
                $p('.modal-backdrop').remove();
            }
        });
    </script>
@endsection