@extends('admin.layouts.master')

@section('title', 'Examination Notices & Portal Regulations')

@section('css')
    <style>
        .notice-wrapper {
            padding: 1.5rem 0 3rem;
        }

        .card-custom {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.04);
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .card-custom-header {
            background: #ffffff;
            border-bottom: 1px solid #e2e8f0;
            padding: 1.25rem 1.75rem;
        }

        .label-custom {
            font-size: 0.825rem;
            font-weight: 700;
            color: #334155;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 0.5rem;
            display: block;
        }

        .form-control-custom {
            border-radius: 10px;
            border: 1.5px solid #cbd5e1;
            font-size: 0.925rem;
            font-weight: 600;
            padding: 0.65rem 1rem;
            transition: all 0.2s ease;
        }

        .form-control-custom:focus {
            border-color: #047857;
            box-shadow: 0 0 0 4px rgba(4, 120, 87, 0.12);
        }

        .btn-publish-notice {
            background: linear-gradient(135deg, #047857 0%, #065f46 100%);
            color: #ffffff;
            font-weight: 700;
            font-size: 0.925rem;
            padding: 0.75rem 1.75rem;
            border-radius: 10px;
            border: none;
            box-shadow: 0 4px 14px rgba(4, 120, 87, 0.25);
            transition: all 0.2s ease;
        }

        .btn-publish-notice:hover {
            color: #ffffff;
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(4, 120, 87, 0.35);
        }

        /* Live Preview Panel */
        .preview-box {
            background: #ffffff;
            border: 2px dashed #a7f3d0;
            border-radius: 18px;
            padding: 1.75rem;
        }

        .notice-badge {
            background: #ecfdf5;
            border: 1px solid #a7f3d0;
            color: #047857;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.35rem 0.75rem;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }

        .notice-card-blue {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-left: 4px solid #0284c7;
            border-radius: 12px;
            padding: 1.1rem;
            margin-top: 1rem;
        }

        .notice-card-amber {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-left: 4px solid #d97706;
            border-radius: 12px;
            padding: 1.1rem;
            margin-top: 1rem;
        }

        .badge-active-tag {
            background: #dcfce7;
            color: #15803d;
            border: 1px solid #86efac;
            font-weight: 700;
            font-size: 0.75rem;
            padding: 0.3rem 0.7rem;
            border-radius: 6px;
        }

        .badge-inactive-tag {
            background: #f1f5f9;
            color: #64748b;
            border: 1px solid #cbd5e1;
            font-weight: 600;
            font-size: 0.75rem;
            padding: 0.3rem 0.7rem;
            border-radius: 6px;
        }
    </style>
@endsection

@section('content')
<div class="content-header">
    <div class="container-fluid" style="max-width: 1200px;">
        
        <!-- Header -->
        <div class="d-flex align-items-center justify-content-between mb-4">
            <div>
                <h1 class="font-weight-bold mb-1" style="font-size: 1.75rem; color: #0f172a;">
                    <i class="fas fa-bullhorn text-success mr-2"></i> Portal Notices & Regulations Management
                </h1>
                <p class="text-muted mb-0" style="font-size: 0.9rem;">
                    Insert, update, and manage examination notices, login requirements, and regulation deadlines displayed on the portal login page.
                </p>
            </div>
            <div>
                <span class="badge badge-light" style="font-weight: 700; border: 1px solid #cbd5e1; padding: 0.5rem 1rem; border-radius: 10px;">
                    <i class="fas fa-eye text-success mr-1"></i> Live Portal Sync Active
                </span>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert" style="border-radius: 12px; font-weight: 600;">
                <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        <div class="row">
            <!-- Form Column -->
            <div class="col-lg-7">
                <div class="card-custom">
                    <div class="card-custom-header">
                        <h4 class="font-weight-bold mb-0 text-dark" style="font-size: 1.15rem;">
                            <i class="fas fa-edit text-success mr-2"></i> Insert / Edit Examination Record
                        </h4>
                    </div>
                    <div class="card-body p-4">
                        <form action="{{ route('admin.exam-notices.store') }}" method="POST" id="noticeForm">
                            @csrf
                            <input type="hidden" name="id" id="notice_id" value="{{ $activeNotice->id ?? '' }}">

                            <!-- Semester Title -->
                            <div class="form-group mb-3">
                                <label class="label-custom" for="semester_title">
                                    <i class="fas fa-heading mr-1"></i> Semester Examination Title
                                </label>
                                <input type="text" name="semester_title" id="semester_title" class="form-control form-control-custom" placeholder="e.g. 2020 JANUARY Semester Examination Results" value="{{ old('semester_title', $activeNotice->semester_title ?? '') }}" required>
                            </div>

                            <!-- Authentication Requirements Title & Body -->
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group mb-3">
                                        <label class="label-custom" for="auth_title">
                                            <i class="fas fa-info-circle mr-1"></i> Authentication Requirements Heading
                                        </label>
                                        <input type="text" name="auth_title" id="auth_title" class="form-control form-control-custom" placeholder="e.g. Authentication Requirements" value="{{ old('auth_title', $activeNotice->auth_title ?? 'Authentication Requirements') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group mb-3">
                                <label class="label-custom" for="auth_instructions">
                                    <i class="fas fa-key mr-1"></i> Authentication Instructions Body
                                </label>
                                <textarea name="auth_instructions" id="auth_instructions" class="form-control form-control-custom" rows="3" placeholder="e.g. Please enter your Registration Number as your Username and State of Origin as your Password (the same credentials used for your CBT Examinations).">{{ old('auth_instructions', $activeNotice->auth_instructions ?? '') }}</textarea>
                            </div>

                            <!-- Regulations Title & Bullet Content -->
                            <div class="form-group mb-3">
                                <label class="label-custom" for="regulations_title">
                                    <i class="fas fa-exclamation-triangle mr-1"></i> Regulations & Deadlines Heading
                                </label>
                                <input type="text" name="regulations_title" id="regulations_title" class="form-control form-control-custom" placeholder="e.g. Important Regulations & Deadlines" value="{{ old('regulations_title', $activeNotice->regulations_title ?? 'Important Regulations & Deadlines') }}">
                            </div>

                            <div class="form-group mb-4">
                                <label class="label-custom" for="regulations_content">
                                    <i class="fas fa-list-ul mr-1"></i> Regulations & Grievance Deadlines (One item per line)
                                </label>
                                <textarea name="regulations_content" id="regulations_content" class="form-control form-control-custom" rows="5" placeholder="Enter regulations line by line...&#10;e.g. Examination results for students involved in Malpractice during the January Semester remain Withheld.&#10;Complaints submitted outside this portal will not be processed.&#10;There is a strict 10-day window for genuine result grievance submissions (Deadline: 29th November 2020 at midnight).">{{ old('regulations_content', $activeNotice->regulations_content ?? '') }}</textarea>
                            </div>

                            <!-- Active Switch -->
                            <div class="form-group mb-4">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" value="1" {{ old('is_active', $activeNotice->is_active ?? 1) == 1 ? 'checked' : '' }}>
                                    <label class="custom-control-label font-weight-bold text-dark" for="is_active">
                                        Set as Active Notice on Portal Login Page
                                    </label>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center">
                                <button type="button" class="btn btn-light font-weight-bold" id="resetBtn" style="border-radius: 10px; border: 1px solid #cbd5e1;">
                                    <i class="fas fa-undo mr-1"></i> Clear Form
                                </button>
                                <button type="submit" class="btn-publish-notice">
                                    <i class="fas fa-paper-plane mr-1"></i> Save & Publish Notice
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Live Preview Column -->
            <div class="col-lg-5">
                <div class="card-custom">
                    <div class="card-custom-header d-flex align-items-center justify-content-between">
                        <h4 class="font-weight-bold mb-0 text-dark" style="font-size: 1.1rem;">
                            <i class="fas fa-desktop text-success mr-2"></i> Live Login Portal Preview
                        </h4>
                        <span class="badge badge-success px-2 py-1" style="font-size: 0.75rem;">Active View</span>
                    </div>
                    <div class="card-body p-3">
                        <div class="preview-box">
                            <div class="notice-badge">
                                <i class="fas fa-bullhorn"></i> Official Academic Notice
                            </div>

                            <h3 class="font-weight-bold mt-3 mb-3 text-dark" id="prev_title" style="font-size: 1.35rem; line-height: 1.3;">
                                {{ $activeNotice->semester_title ?? '2020 JANUARY Semester Examination Results' }}
                            </h3>

                            <div class="notice-card-blue">
                                <div class="font-weight-bold text-info mb-1" style="font-size: 0.875rem;">
                                    <i class="fas fa-info-circle mr-1"></i> <span id="prev_auth_title">{{ $activeNotice->auth_title ?? 'Authentication Requirements' }}</span>
                                </div>
                                <p class="mb-0 text-dark small" id="prev_auth_body">
                                    {{ $activeNotice->auth_instructions ?? 'Please enter your Registration Number as your Username...' }}
                                </p>
                            </div>

                            <div class="notice-card-amber">
                                <div class="font-weight-bold text-warning mb-1" style="font-size: 0.875rem; color: #b45309 !important;">
                                    <i class="fas fa-exclamation-triangle mr-1"></i> <span id="prev_reg_title">{{ $activeNotice->regulations_title ?? 'Important Regulations & Deadlines' }}</span>
                                </div>
                                <ul class="mb-0 text-muted small pl-3" id="prev_reg_body" style="line-height: 1.5;">
                                    @php
                                        $bullets = array_filter(array_map('trim', explode("\n", $activeNotice->regulations_content ?? '')));
                                    @endphp
                                    @foreach($bullets as $b)
                                        <li>{{ $b }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- History Table Card -->
        <div class="card-custom mt-2">
            <div class="card-custom-header">
                <h4 class="font-weight-bold mb-0 text-dark" style="font-size: 1.15rem;">
                    <i class="fas fa-history text-success mr-2"></i> Notice Records Directory
                </h4>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th style="width: 50px;" class="pl-4">#</th>
                                <th>Semester Title</th>
                                <th>Auth Requirement Summary</th>
                                <th>Regulations & Deadlines</th>
                                <th class="text-center" style="width: 110px;">Status</th>
                                <th class="text-center" style="width: 180px;" class="pr-4">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($notices as $n)
                                <tr>
                                    <td class="pl-4 font-weight-bold text-muted">{{ $loop->index + 1 }}</td>
                                    <td class="font-weight-bold text-dark">{{ $n->semester_title }}</td>
                                    <td class="small text-muted">{{ Str::limit($n->auth_instructions, 60) }}</td>
                                    <td class="small text-muted">{{ Str::limit($n->regulations_content, 70) }}</td>
                                    <td class="text-center">
                                        @if($n->is_active == 1)
                                            <span class="badge-active-tag"><i class="fas fa-check-circle mr-1"></i> Active</span>
                                        @else
                                            <span class="badge-inactive-tag">Inactive</span>
                                        @endif
                                    </td>
                                    <td class="text-center pr-4">
                                        <div class="btn-group" role="group">
                                            @if($n->is_active == 0)
                                                <form action="{{ route('admin.exam-notices.activate', $n->id) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    <button type="submit" class="btn btn-xs btn-outline-success font-weight-bold mr-1" title="Set Active">
                                                        <i class="fas fa-check"></i> Activate
                                                    </button>
                                                </form>
                                            @endif

                                            <button type="button" class="btn btn-xs btn-outline-primary font-weight-bold edit-btn mr-1" 
                                                data-id="{{ $n->id }}"
                                                data-semester_title="{{ $n->semester_title }}"
                                                data-auth_title="{{ $n->auth_title }}"
                                                data-auth_instructions="{{ $n->auth_instructions }}"
                                                data-regulations_title="{{ $n->regulations_title }}"
                                                data-regulations_content="{{ $n->regulations_content }}"
                                                data-is_active="{{ $n->is_active }}">
                                                <i class="fas fa-edit"></i> Edit
                                            </button>

                                            <form action="{{ route('admin.exam-notices.destroy', $n->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this notice record?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-xs btn-outline-danger font-weight-bold" title="Delete Notice">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            // Live Preview Sync
            $('#semester_title').on('input', function() {
                $('#prev_title').text($(this).val() || '2020 JANUARY Semester Examination Results');
            });
            $('#auth_title').on('input', function() {
                $('#prev_auth_title').text($(this).val() || 'Authentication Requirements');
            });
            $('#auth_instructions').on('input', function() {
                $('#prev_auth_body').text($(this).val() || 'Please enter your credentials...');
            });
            $('#regulations_title').on('input', function() {
                $('#prev_reg_title').text($(this).val() || 'Important Regulations & Deadlines');
            });
            $('#regulations_content').on('input', function() {
                var lines = $(this).val().split('\n').filter(function(l) { return l.trim() !== ''; });
                var html = '';
                lines.forEach(function(l) {
                    html += '<li>' + $('<div>').text(l).html() + '</li>';
                });
                $('#prev_reg_body').html(html);
            });

            // Edit Button Handler
            $('.edit-btn').on('click', function() {
                $('#notice_id').val($(this).data('id'));
                $('#semester_title').val($(this).data('semester_title')).trigger('input');
                $('#auth_title').val($(this).data('auth_title')).trigger('input');
                $('#auth_instructions').val($(this).data('auth_instructions')).trigger('input');
                $('#regulations_title').val($(this).data('regulations_title')).trigger('input');
                $('#regulations_content').val($(this).data('regulations_content')).trigger('input');
                $('#is_active').prop('checked', $(this).data('is_active') == 1);
                
                $('html, body').animate({ scrollTop: $('#noticeForm').offset().top - 100 }, 300);
            });

            // Reset Button Handler
            $('#resetBtn').on('click', function() {
                $('#notice_id').val('');
                $('#noticeForm')[0].reset();
                $('#semester_title').trigger('input');
            });
        });
    </script>
@endsection