@extends('Admin.layout')
@section('content')

    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('notification_list') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Send Notification
            </h5>
        </div>
    </div>

    <div class="card p-5 m-2">
        <form action="{{ route('notification_store') }}" method="POST" id="notificationForm">
            @csrf

            <div class="row">

                {{-- Target audience --}}
                <div class="col-lg-6 mb-3">
                    <label class="form-label">Send To</label>
                    <select class="form-select @error('target') is-invalid @enderror" name="target" id="targetSelect">
                        <option value="all" {{ old('target', 'all') == 'all' ? 'selected' : '' }}>All Members</option>
                        <option value="specific" {{ old('target') == 'specific' ? 'selected' : '' }}>Specific Member</option>
                    </select>
                    @error('target')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                {{-- Specific member dropdown (shown only when target = specific) --}}
                <div class="col-lg-6 mb-3" id="memberSelectWrapper" style="{{ old('target') == 'specific' ? '' : 'display:none;' }}">
                    <label class="form-label">Select Member</label>
                    <select class="form-select @error('user_id') is-invalid @enderror" name="user_id">
                        <option value="">Select Member</option>
                        @foreach($members as $member)
                            <option value="{{ $member->id }}" {{ old('user_id') == $member->id ? 'selected' : '' }}>
                                {{ $member->member_id }} - {{ $member->name }}
                            </option>
                        @endforeach
                    </select>
                    @error('user_id')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                {{-- Type --}}
                <div class="col-lg-6 mb-3">
                    <label class="form-label">Type</label>
                    <select class="form-select @error('type') is-invalid @enderror" name="type">
                        <option value="general" {{ old('type', 'general') == 'general' ? 'selected' : '' }}>General</option>
                        <option value="announcement" {{ old('type') == 'announcement' ? 'selected' : '' }}>Announcement</option>
                        <option value="package" {{ old('type') == 'package' ? 'selected' : '' }}>Package</option>
                        <option value="membership" {{ old('type') == 'membership' ? 'selected' : '' }}>Membership</option>
                        <option value="event" {{ old('type') == 'event' ? 'selected' : '' }}>Event</option>
                    </select>
                    @error('type')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                {{-- Title --}}
                <div class="col-lg-12 mb-3">
                    <label class="form-label">Title</label>
                    <input type="text" class="form-control @error('title') is-invalid @enderror"
                        name="title" value="{{ old('title') }}" placeholder="e.g. Gym Closed on Sunday" maxlength="255">
                    @error('title')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

                {{-- Description --}}
                <div class="col-lg-12 mb-3">
                    <label class="form-label">Message</label>
                    <textarea rows="4" class="form-control @error('description') is-invalid @enderror"
                        name="description" placeholder="Write your notification message here..." maxlength="1000">{{ old('description') }}</textarea>
                    @error('description')
                        <small class="text-danger">{{ $message }}</small>
                    @enderror
                </div>

            </div>

            <div class="form-actions mt-4 d-flex gap-3 justify-content-center">
                <a href="{{ route('notification_list') }}" class="btn btn-label-secondary">Cancel</a>
                <button type="submit" id="finalSubmit" class="btn btn-primary">
                    <i class="ti tabler-send me-1"></i> Send Notification
                </button>
            </div>

        </form>
    </div>

    <script>
        document.getElementById('targetSelect').addEventListener('change', function () {
            const wrapper = document.getElementById('memberSelectWrapper');
            wrapper.style.display = this.value === 'specific' ? '' : 'none';
        });

        document.getElementById('finalSubmit').addEventListener('click', function () {
            this.disabled = true;
            this.innerText = 'Sending...';
            document.getElementById('notificationForm').submit();
        });
    </script>

@endsection