@extends('admin.layouts.app')
@section('title', isset($notice) ? 'Edit Notice' : 'Post Notice')
@section('breadcrumb')
    <span>/</span> <a href="{{ route('admin.notices.index') }}" style="color:inherit;text-decoration:none;">Notice Board</a>
    <span>/</span> {{ isset($notice) ? 'Edit' : 'Post' }}
@endsection

@section('content')
<div class="page-header">
    <div><h1>{{ isset($notice) ? 'Edit Notice' : 'Post Notice' }}</h1></div>
    <a href="{{ route('admin.notices.index') }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-2"></i>Back</a>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header"><h6 class="mb-0 fw-700"><i class="fas fa-bullhorn text-warning me-2"></i>Notice Details</h6></div>
            <div class="card-body">
                <form method="POST"
                    action="{{ isset($notice) ? route('admin.notices.update',$notice) : route('admin.notices.store') }}">
                    @csrf @if(isset($notice)) @method('PUT') @endif

                    <div class="mb-3">
                        <label class="form-label">Notice Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                            placeholder="Enter notice title"
                            value="{{ old('title',$notice->title??'') }}" required>
                        @error('title') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Description <span class="text-danger">*</span></label>
                        <textarea name="description" class="form-control @error('description') is-invalid @enderror"
                            rows="5" placeholder="Notice content..." required>{{ old('description',$notice->description??'') }}</textarea>
                        @error('description') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Flash Start Date</label>
                            <input type="date" name="flash_start_date" class="form-control"
                                value="{{ old('flash_start_date', isset($notice) ? $notice->flash_start_date?->format('Y-m-d') : '') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Flash End Date</label>
                            <input type="date" name="flash_end_date" class="form-control @error('flash_end_date') is-invalid @enderror"
                                value="{{ old('flash_end_date', isset($notice) ? $notice->flash_end_date?->format('Y-m-d') : '') }}">
                            @error('flash_end_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" class="form-select">
                                <option value="active"   {{ old('status',$notice->status??'active')==='active'?'selected':'' }}>Active</option>
                                <option value="inactive" {{ old('status',$notice->status??'')==='inactive'?'selected':'' }}>Inactive</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Flash To <span class="text-danger">*</span></label>
                            <select name="flash_to" id="flashTo" class="form-select" onchange="toggleTarget(this.value)">
                                @foreach(['all'=>'All Users','department'=>'Department','role'=>'Role','specific_user'=>'Specific User'] as $v => $l)
                                <option value="{{ $v }}" {{ old('flash_to',$notice->flash_to??'all')===$v?'selected':'' }}>{{ $l }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Target fields -->
                    <div id="targetDept" style="display:none;" class="mb-3">
                        <label class="form-label">Target Department</label>
                        <select name="target_department_id" class="form-select">
                            <option value="">Select Department</option>
                            @foreach($departments as $id => $name)
                            <option value="{{ $id }}" {{ old('target_department_id',$notice->target_department_id??'')==$id?'selected':'' }}>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div id="targetRole" style="display:none;" class="mb-3">
                        <label class="form-label">Target Role</label>
                        <select name="target_role_id" class="form-select">
                            <option value="">Select Role</option>
                            @foreach($roles as $id => $name)
                            <option value="{{ $id }}" {{ old('target_role_id',$notice->target_role_id??'')==$id?'selected':'' }}>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div id="targetUser" style="display:none;" class="mb-3">
                        <label class="form-label">Target User</label>
                        <select name="target_user_id" class="form-select">
                            <option value="">Select User</option>
                            @foreach($users as $id => $name)
                            <option value="{{ $id }}" {{ old('target_user_id',$notice->target_user_id??'')==$id?'selected':'' }}>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary flex-grow-1">
                            <i class="fas fa-paper-plane me-2"></i>{{ isset($notice) ? 'Update Notice' : 'Post Notice' }}
                        </button>
                        <a href="{{ route('admin.notices.index') }}" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card" style="background:#fffbeb;border:1.5px solid #fde68a;">
            <div class="card-body">
                <h6 class="fw-700 mb-3"><i class="fas fa-info-circle text-warning me-2"></i>How Flash Works</h6>
                <ul style="font-size:12px;color:#92400e;padding-left:18px;line-height:1.9;">
                    <li><strong>All Users</strong> — Notice shown to everyone</li>
                    <li><strong>Department</strong> — Only that dept's users</li>
                    <li><strong>Role</strong> — Only users with that role</li>
                    <li><strong>Specific User</strong> — One person only</li>
                    <li>Leave dates blank to flash always</li>
                    <li>Notice stops flashing after end date</li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function toggleTarget(val) {
    document.getElementById('targetDept').style.display  = val==='department'    ? '' : 'none';
    document.getElementById('targetRole').style.display  = val==='role'          ? '' : 'none';
    document.getElementById('targetUser').style.display  = val==='specific_user' ? '' : 'none';
}
// Run on load
toggleTarget(document.getElementById('flashTo').value);
</script>
@endpush