@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-bell mr-2"></i>
                        Send Push Notification
                    </h3>
                </div>
                
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show m-3" role="alert">
                        <i class="fas fa-check-circle mr-2"></i>
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show m-3" role="alert">
                        <i class="fas fa-exclamation-circle mr-2"></i>
                        <strong>Please fix the following errors:</strong>
                        <ul class="mb-0 mt-2">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif
                
                <form action="{{ route('notifications.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <div class="row">
                            <!-- Title -->
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="title">
                                        <i class="fas fa-heading text-primary"></i>
                                        Notification Title *
                                    </label>
                                    <input type="text" 
                                           class="form-control @error('title') is-invalid @enderror" 
                                           id="title" 
                                           name="title" 
                                           value="{{ old('title') }}" 
                                           maxlength="150" 
                                           placeholder="Enter notification title"
                                           required>
                                    @error('title')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                    <small class="form-text text-muted">Maximum 150 characters</small>
                                </div>
                            </div>

                            <!-- Body -->
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="body">
                                        <i class="fas fa-align-left text-primary"></i>
                                        Notification Message *
                                    </label>
                                    <textarea class="form-control @error('body') is-invalid @enderror" 
                                              id="body" 
                                              name="body" 
                                              rows="4" 
                                              placeholder="Enter notification message"
                                              required>{{ old('body') }}</textarea>
                                    @error('body')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <!-- Target App -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="target_app">
                                        <i class="fas fa-mobile-alt text-primary"></i>
                                        Send To *
                                    </label>
                                    <select class="form-control @error('target_app') is-invalid @enderror" 
                                            id="target_app" 
                                            name="target_app" 
                                            required>
                                        <option value="">-- Select Target App --</option>
                                        <option value="customer" {{ old('target_app') == 'customer' ? 'selected' : '' }}>
                                            <i class="fas fa-user"></i> Customer App Only
                                        </option>
                                        <option value="brand" {{ old('target_app') == 'brand' ? 'selected' : '' }}>
                                            <i class="fas fa-store"></i> Brand App Only
                                        </option>
                                        <option value="both" {{ old('target_app') == 'both' ? 'selected' : '' }}>
                                            <i class="fas fa-users"></i> Both Apps
                                        </option>
                                    </select>
                                    @error('target_app')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                    <small class="form-text text-muted">Choose which app should receive this notification</small>
                                </div>
                            </div>

                            <!-- Target Type -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="target_type">
                                        <i class="fas fa-bullseye text-primary"></i>
                                        Target Audience *
                                    </label>
                                    <select class="form-control @error('target_type') is-invalid @enderror" 
                                            id="target_type" 
                                            name="target_type" 
                                            required>
                                        <option value="">-- Select Audience --</option>
                                        <option value="all" {{ old('target_type') == 'all' ? 'selected' : '' }}>
                                            All Users
                                        </option>
                                        <option value="single" {{ old('target_type') == 'single' ? 'selected' : '' }}>
                                            Single User (by mobile)
                                        </option>
                                        <option value="sector" {{ old('target_type') == 'sector' ? 'selected' : '' }}>
                                            Specific Sector (filtered)
                                        </option>
                                    </select>
                                    @error('target_type')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <!-- Mobile Number (for single user) -->
                            <div class="col-md-12" id="mobile_number_group" style="display: none;">
                                <div class="form-group">
                                    <label for="mobile_number">
                                        <i class="fas fa-phone text-primary"></i>
                                        Mobile Number
                                    </label>
                                    <input type="text" 
                                           class="form-control @error('mobile_number') is-invalid @enderror" 
                                           id="mobile_number" 
                                           name="mobile_number" 
                                           value="{{ old('mobile_number') }}"
                                           placeholder="Enter mobile number">
                                    @error('mobile_number')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                    <small class="form-text text-muted">Required when targeting a single user</small>
                                </div>
                            </div>

                            <!-- Image Upload -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="image">
                                        <i class="fas fa-image text-primary"></i>
                                        Notification Image (Optional)
                                    </label>
                                    <div class="custom-file">
                                        <input type="file" 
                                               class="custom-file-input @error('image') is-invalid @enderror" 
                                               id="image" 
                                               name="image" 
                                               accept="image/*">
                                        <label class="custom-file-label" for="image">Choose image...</label>
                                    </div>
                                    @error('image')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                    <small class="form-text text-muted">Max size: 2MB. Recommended: 1200x600px</small>
                                </div>
                            </div>

                            <!-- Deep Link -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="deep_link">
                                        <i class="fas fa-link text-primary"></i>
                                        Deep Link (Optional)
                                    </label>
                                    <input type="text" 
                                           class="form-control @error('deep_link') is-invalid @enderror" 
                                           id="deep_link" 
                                           name="deep_link" 
                                           value="{{ old('deep_link') }}"
                                           placeholder="/brand/123 or /category/456">
                                    @error('deep_link')
                                        <span class="invalid-feedback">{{ $message }}</span>
                                    @enderror
                                    <small class="form-text text-muted">App navigation path when notification is tapped</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer bg-light">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-paper-plane mr-2"></i>
                            Send Notification
                        </button>
                        <a href="{{ url()->previous() }}" class="btn btn-secondary btn-lg ml-2">
                            <i class="fas fa-times mr-2"></i>
                            Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Show/hide mobile number field based on target type
document.getElementById('target_type').addEventListener('change', function() {
    const mobileGroup = document.getElementById('mobile_number_group');
    const mobileInput = document.getElementById('mobile_number');
    
    if (this.value === 'single') {
        mobileGroup.style.display = 'block';
        mobileInput.required = true;
    } else {
        mobileGroup.style.display = 'none';
        mobileInput.required = false;
    }
});

// Update file input label when file is selected
document.getElementById('image').addEventListener('change', function(e) {
    const fileName = e.target.files[0]?.name || 'Choose image...';
    const label = document.querySelector('.custom-file-label');
    label.textContent = fileName;
});

// Trigger on page load to handle old() values
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('target_type').dispatchEvent(new Event('change'));
});
</script>

<style>
.card {
    border: none;
    border-radius: 10px;
}

.card-header {
    border-radius: 10px 10px 0 0 !important;
}

.form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.btn-lg {
    padding: 10px 30px;
    font-size: 16px;
}

label i {
    margin-right: 5px;
}
</style>
@endsection