@extends('Shared.Layouts.MasterWithoutMenus')

@section('title')
    @lang("Organiser.select_organiser")
@stop

@section('head')
    <style>
        .modal-header {
            background-color: transparent !important;
            color: #666 !important;
            text-shadow: none !important;
        }
        
        .select-organiser-panel {
            max-width: 500px !important;
            width: 100% !important;
        }
        
        .select-organiser-panel .logo-text {
            font-size: 36px;
            font-weight: 800;
            letter-spacing: -0.5px;
            color: #8B5CF6;
            margin: 0;
        }
        
        .select-organiser-panel .logo-text .tix {
            color: #FF6B35;
        }
        
        .select-organiser-panel .logo-tagline {
            font-size: 13px;
            color: #666;
            margin-top: 5px;
            margin-bottom: 25px;
        }
        
        .select-organiser-panel h5 {
            font-size: 16px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 15px;
        }
        
        .select-organiser-panel .list-group-item {
            border-radius: 8px;
            margin-bottom: 10px;
            border: 2px solid #e5e7eb;
            padding: 15px 20px;
            transition: all 0.3s ease;
            font-weight: 500;
            color: #374151;
        }
        
        .select-organiser-panel .list-group-item:hover {
            border-color: #8B5CF6;
            background: #f5f3ff;
            transform: translateX(5px);
            color: #8B5CF6;
        }
        
        .select-organiser-panel .or-divider {
            margin: 20px 0;
            text-align: center;
            color: #9ca3af;
            font-size: 14px;
            font-weight: 600;
        }
        
        .select-organiser-panel .btn-success {
            background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
            border: none;
            padding: 14px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .select-organiser-panel .btn-success:hover {
            background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
        }
    </style>
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="panel select-organiser-panel">
                <div class="panel-body">
                    <div class="logo">
                        <h1 class="logo-text">Tamasha<span class="tix">Tix</span></h1>
                        <p class="logo-tagline">Tiketi Yako, Tamasha Yako!</p>
                    </div>

                    <h5>@lang("Organiser.continue_to"):</h5>
                    <div class="list-group">
                        @if ($organisers)
                            @foreach($organisers as $organiser)
                                <a href="{{route('showOrganiserDashboard', ['organiser_id'=>$organiser->id] )}}"
                                   class="list-group-item">
                                    <i class="ico-user" style="margin-right: 10px; color: #8B5CF6;"></i>
                                    {{$organiser->name}}
                                </a>
                            @endforeach
                        @endif
                    </div>

                    <div class="or-divider">
                        @lang("Organiser.or_caps")
                    </div>
                    <a style="color: white;" href="{{route('showCreateOrganiser')}}" class="btn btn-block btn-success">
                        <i class="ico-plus" style="margin-right: 8px;"></i>
                        @lang("Organiser.create_new_organiser")
                    </a>
                </div>
            </div>
        </div>
    </div>
@stop

