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

<div>
    <h5>
        <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
            <a href="{{ route('notification') }}">
                <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"
                    class="icon icon-tabler">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M15 6l-6 6l6 6" />
                </svg>
            </a>
        </button>
        Add Notification
    </h5>
</div>

<div class="card p-5">

    <form action="{{ route('store_notification') }}" method="POST" id="addNotificationForm">
        @csrf

        <div class="row">

            {{-- Title Field --}}
            <div class="col-lg-6 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="Enter title">
                @error('title')
                    <div class="text-danger mt-1 small">{{ $message }}</div>
                @enderror
            </div>

            {{-- Send To Field (Saved as 'type' in DB) --}}
            <div class="col-lg-6 mb-3">
                <label class="form-label">Send To</label>
                <select name="type" id="type" class="form-select @error('type') is-invalid @enderror">
                    <option value="">Select</option>
                    <option value="user" {{ old('type') == 'user' ? 'selected' : '' }}>User</option>
                    <option value="restaurant" {{ old('type') == 'restaurant' ? 'selected' : '' }}>Restaurant</option>
                    <option value="delivery_partner" {{ old('type') == 'delivery_partner' ? 'selected' : '' }}>Delivery Partner</option>
                </select>
                @error('type')
                    <div class="text-danger mt-1 small">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-12 mb-3">
                <label class="form-label">Description</label>
                <textarea class="form-control @error('message') is-invalid @enderror" 
                          name="message" 
                          id="message" 
                          rows="3" 
                          placeholder="Enter description">{{ old('message') }}</textarea>
                @error('message')
                    <div class="text-danger mt-1 small">{{ $message }}</div>
                @enderror
            </div>

        </div>

        <div class="d-flex justify-content-center align-items-center mt-5 gap-5">
            <button class="btn btn-light" type="reset">Discard</button>
            <button class="btn btn-primary" type="submit" id="submitBtn">
                <span id="btnText">Submit</span>
                <span id="btnSpinner" style="display: none;">
                    <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                    Processing...
                </span>
            </button>
        </div>
        
    </form>

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('addNotificationForm');
    
    if (form) {
        form.addEventListener('submit', function (e) {
            const submitBtn = document.getElementById('submitBtn');
            const btnText = document.getElementById('btnText');
            const btnSpinner = document.getElementById('btnSpinner');

            btnText.style.display = 'none';
            btnSpinner.style.display = 'inline-block';
            
            submitBtn.disabled = true;
        });
    }
});
</script>

@endsection