@extends('layouts.app')

@section('title', 'নতুন নোটিশ তৈরি')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('notices.index') }}">নোটিশ</a></li>
                    <li class="breadcrumb-item active">নতুন নোটিশ</li>
                </ol>
            </nav>
            <h2 class="mb-0">নতুন নোটিশ তৈরি</h2>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <form action="{{ route('notices.store') }}" method="POST" enctype="multipart/form-data" id="noticeForm">
                @csrf
                
                <div class="row">
                    <div class="col-md-8">
                        <!-- বেসিক তথ্য -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">বেসিক তথ্য</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="title" class="form-label">শিরোনাম <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                           id="title" name="title" value="{{ old('title') }}" required>
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="content" class="form-label">বিস্তারিত <span class="text-danger">*</span></label>
                                    <textarea class="form-control @error('content') is-invalid @enderror" 
                                              id="content" name="content" rows="10" required>{{ old('content') }}</textarea>
                                    @error('content')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- ফাইল সংযুক্তি -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">ফাইল সংযুক্তি</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="attachment" class="form-label">ফাইল আপলোড</label>
                                    <input type="file" class="form-control @error('attachment') is-invalid @enderror" 
                                           id="attachment" name="attachment" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
                                    <small class="text-muted">সাপোর্টেড ফরম্যাট: JPG, PNG, PDF, DOC, DOCX | সর্বোচ্চ সাইজ: 5MB</small>
                                    @error('attachment')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <!-- সেটিংস -->
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">সেটিংস</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label for="notice_type" class="form-label">নোটিশ টাইপ <span class="text-danger">*</span></label>
                                    <select class="form-control @error('notice_type') is-invalid @enderror" 
                                            id="notice_type" name="notice_type" required>
                                        <option value="">সিলেক্ট করুন</option>
                                        <option value="general" {{ old('notice_type') == 'general' ? 'selected' : '' }}>সাধারণ নোটিশ</option>
                                        <option value="meeting" {{ old('notice_type') == 'meeting' ? 'selected' : '' }}>মিটিং নোটিশ</option>
                                        <option value="event" {{ old('notice_type') == 'event' ? 'selected' : '' }}>ইভেন্ট নোটিশ</option>
                                        <option value="payment" {{ old('notice_type') == 'payment' ? 'selected' : '' }}>পেমেন্ট নোটিশ</option>
                                    </select>
                                    @error('notice_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="target_audience" class="form-label">টার্গেট অডিয়েন্স <span class="text-danger">*</span></label>
                                    <select class="form-control @error('target_audience') is-invalid @enderror" 
                                            id="target_audience" name="target_audience" required>
                                        <option value="">সিলেক্ট করুন</option>
                                        <option value="all" {{ old('target_audience') == 'all' ? 'selected' : '' }}>সবাই</option>
                                        <option value="members" {{ old('target_audience') == 'members' ? 'selected' : '' }}>শুধু সদস্যরা</option>
                                        <option value="committee" {{ old('target_audience') == 'committee' ? 'selected' : '' }}>শুধু কমিটি</option>
                                        <option value="specific" {{ old('target_audience') == 'specific' ? 'selected' : '' }}>নির্দিষ্ট সদস্য</option>
                                    </select>
                                    @error('target_audience')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- নির্দিষ্ট সদস্য সিলেক্ট -->
                                <div class="mb-3" id="specific_members_section" style="display: none;">
                                    <label for="specific_members" class="form-label">নির্দিষ্ট সদস্য নির্বাচন <span class="text-danger">*</span></label>
                                    <select class="form-control select2 @error('specific_members') is-invalid @enderror" 
                                            id="specific_members" name="specific_members[]" multiple>
                                        @foreach($users as $user)
                                            <option value="{{ $user->id }}" 
                                                {{ in_array($user->id, old('specific_members', [])) ? 'selected' : '' }}>
                                                {{ $user->name }} ({{ $user->email }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('specific_members')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label for="publish_date" class="form-label">প্রকাশের তারিখ</label>
                                        <input type="date" class="form-control @error('publish_date') is-invalid @enderror" 
                                               id="publish_date" name="publish_date" value="{{ old('publish_date') }}">
                                        @error('publish_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6">
                                        <label for="expiry_date" class="form-label">মেয়াদ শেষের তারিখ</label>
                                        <input type="date" class="form-control @error('expiry_date') is-invalid @enderror" 
                                               id="expiry_date" name="expiry_date" value="{{ old('expiry_date') }}">
                                        @error('expiry_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="status" class="form-label">স্ট্যাটাস <span class="text-danger">*</span></label>
                                    <select class="form-control @error('status') is-invalid @enderror" 
                                            id="status" name="status" required>
                                        <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>খসড়া</option>
                                        <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>প্রকাশিত</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="priority" class="form-label">অগ্রাধিকার</label>
                                    <select class="form-control @error('priority') is-invalid @enderror" 
                                            id="priority" name="priority">
                                        <option value="medium" {{ old('priority') == 'medium' ? 'selected' : '' }}>সাধারণ</option>
                                        <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>নিম্ন</option>
                                        <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>উচ্চ</option>
                                        <option value="urgent" {{ old('priority') == 'urgent' ? 'selected' : '' }}>জরুরি</option>
                                    </select>
                                    @error('priority')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" 
                                               id="is_important" name="is_important" value="1"
                                               {{ old('is_important') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_important">
                                            <i class="fas fa-exclamation-triangle text-danger"></i> গুরুত্বপূর্ণ নোটিশ
                                        </label>
                                    </div>

                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" 
                                               id="send_notification" name="send_notification" value="1"
                                               {{ old('send_notification') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="send_notification">
                                            <i class="fas fa-bell text-warning"></i> নোটিফিকেশন পাঠান
                                        </label>
                                    </div>

                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" 
                                               id="pin_to_top" name="pin_to_top" value="1"
                                               {{ old('pin_to_top') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="pin_to_top">
                                            <i class="fas fa-thumbtack text-primary"></i> পিন করে রাখুন
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- সাবমিট বাটন -->
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-save"></i> নোটিশ সংরক্ষণ করুন
                            </button>
                            <a href="{{ route('notices.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> বাতিল করুন
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
.select2-container--default .select2-selection--multiple {
    min-height: 38px;
    border: 1px solid #ced4da;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #80bdff;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    // Select2 ইনিশিয়ালাইজ
    $('#specific_members').select2({
        placeholder: 'সদস্য নির্বাচন করুন',
        allowClear: true,
        width: '100%'
    });

    // টার্গেট অডিয়েন্স পরিবর্তন
    $('#target_audience').change(function() {
        if ($(this).val() === 'specific') {
            $('#specific_members_section').show();
            $('#specific_members').prop('required', true);
        } else {
            $('#specific_members_section').hide();
            $('#specific_members').prop('required', false);
        }
    });

    // তারিখ ভ্যালিডেশন
    $('#publish_date, #expiry_date').change(function() {
        var publishDate = $('#publish_date').val();
        var expiryDate = $('#expiry_date').val();
        
        if (publishDate && expiryDate) {
            if (new Date(expiryDate) <= new Date(publishDate)) {
                alert('মেয়াদ শেষের তারিখ প্রকাশের তারিখের পরে হতে হবে');
                $('#expiry_date').val('');
            }
        }
    });

    // পুরাতন ভ্যালু সেট করা
    @if(old('target_audience') == 'specific')
        $('#specific_members_section').show();
        $('#specific_members').prop('required', true);
    @endif
});
</script>
@endpush