@extends('layouts.admin.index')

@section('content')
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if ($errors->any())
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="container mt-4">
    <h4 class="fw-bold mb-4">Send Event / Promotion Notification</h4>

    <form action="{{ route('admin.email.send') }}" method="POST" enctype="multipart/form-data">
        @csrf

        {{-- Title --}}
        <div class="mb-3">
            <label for="title" class="form-label"><strong>Title</strong></label>
            <input type="text" class="form-control" name="title" id="title" placeholder="Enter title..." required>
        </div>

        {{-- Description --}}
        <div class="mb-3">
            <label for="desc" class="form-label"><strong>Description</strong></label>
            <textarea class="form-control" name="desc" id="desc" rows="4" placeholder="Write your message..." required></textarea>
        </div>

        {{-- Target Audience --}}
        <div class="mb-3">
            <label><strong>Target Audience</strong></label>
            <select id="targetAudience" class="form-control" name="audience" required>
                <option value="">--Please choose--</option>
                <option value="all"><strong style="color: black;">All users (General Combo)</strong></option>
                <option value="specific"><strong style="color: black;">Specific users (Birthday Combo)</strong></option>
            </select>
        </div>

        {{-- Month Selector (Hidden by default, shows if "specific" is chosen) --}}
        <div class="mb-3" id="monthSelector" style="display: none;">
            <label><strong>Select Birthday Month</strong></label>
            <select name="birth_month" class="form-control">
                <option value="">Please choose a month</option>
                @foreach(range(1, 12) as $m)
                    <option value="{{ $m }}">{{ DateTime::createFromFormat('!m', $m)->format('F') }}</option>
                @endforeach
            </select>
        </div>

        {{-- Dates --}}
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="start_date" class="form-label"><strong>Start Date</strong></label>
                <input type="date" class="form-control" name="start_date" id="start_date" required>
            </div>
            <div class="col-md-6">
                <label for="end_date" class="form-label"><strong>End Date</strong></label>
                <input type="date" class="form-control" name="end_date" id="end_date" required>
            </div>
        </div>

        {{-- Image --}}
        <div class="mb-3">
            <label for="image" class="form-label"><strong>Upload Image</strong></label>
            <input type="file" class="form-control" name="image" id="image" accept="image/*" required>
        </div>

        {{-- Remark --}}
        <div class="mb-3">
            <label for="remark" class="form-label"><strong>Remark</strong></label>
            <textarea class="form-control" name="remark" id="remark" rows="3" placeholder="Any additional remark..."></textarea>
        </div>

        {{-- Submit --}}
        <button type="submit" class="btn btn-primary">Send Notification</button>
    </form>
</div>

{{-- Script to toggle user dropdown --}}
<script>
    document.getElementById('targetAudience').addEventListener('change', function () {
        var monthSelector = document.getElementById('monthSelector');
        if (this.value === 'specific') {
            monthSelector.style.display = 'block';
        } else {
            monthSelector.style.display = 'none';
        }
    });
</script>
@endsection