@extends('admin.layouts.app')

@section('title', '| Mass Push')
@section('mass-push', 'active')

@section('content')
    <div class="iq-card">
        <div class="iq-card-header d-flex justify-content-between">
            <div class="iq-header-title">
                <h4 class="card-title">Create Mass Push</h4>
            </div>
        </div>
        <div class="iq-card-body">
            <form action="{{ route('admin.mass-push.store') }}" method="POST" class="needs-validation" id="massPushForm" novalidate>
                @csrf
                <div class="mb-3">
                    <label for="validationTitle">Title</label>
                    <input type="text" class="form-control @error('title') is-invalid @enderror" id="validationTitle" name="title" placeholder="Push Title..." value="{{ old('title') }}" required>
                    @error('title')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="mb-3">
                    <label for="validationDescription">Description</label>
                    <textarea class="form-control @error('description') is-invalid @enderror" id="validationDescription" name="description" placeholder="Write description here..." required style="line-height: unset;" rows="6">{{ old('description') }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <button class="btn btn-primary" type="submit" id="submitButton" disabled>Submit</button>
            </form>
        </div>
    </div>

    <script>
        function validateForm() {
            const title = document.getElementById('validationTitle').value.trim();
            const description = document.getElementById('validationDescription').value.trim();
            const submitButton = document.getElementById('submitButton');

            if (title && description) {
                submitButton.disabled = false;
            } else {
                submitButton.disabled = true;
            }
        }

        document.getElementById('validationTitle').addEventListener('input', validateForm);
        document.getElementById('validationDescription').addEventListener('input', validateForm);

        document.getElementById('massPushForm').addEventListener('submit', function (e) {
            const submitButton = document.getElementById('submitButton');
            submitButton.disabled = true;
            submitButton.textContent = 'Processing...'; 
        });
    </script>
@endsection