@extends('layout.app')

@section('title', 'Tambah Promo - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Tambah Promo" 
    :breadcrumbs="[
        ['name' => 'Promo', 'url' => route('promo.index')],
        ['name' => 'Tambah']
    ]"
/>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-lg-8">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">local_offer</i> Form Tambah Promo
                    </h6>
                </div>
                <div class="card-body pt-3">
                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <span class="alert-icon"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i></span>
                            <span class="alert-text">
                                <ul class="mb-0">
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </span>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('promo.store') }}">
                        @csrf
                        
                        <div class="input-group input-group-outline mb-3">
                            <label for="title" class="form-label">Judul Promo <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                   id="title" name="title" value="{{ old('title') }}" required>
                            @error('title')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="input-group input-group-outline mb-3">
                            <label for="description" class="form-label">Deskripsi <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="3" required>{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="input-group input-group-outline mb-3">
                            <label for="subtitle" class="form-label">Subtitle</label>
                            <input type="text" class="form-control @error('subtitle') is-invalid @enderror" 
                                   id="subtitle" name="subtitle" value="{{ old('subtitle') }}" 
                                   placeholder="Contoh: Periode 23 - 30 Mei 2024">
                            @error('subtitle')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="input-group input-group-outline mb-3">
                                    <label for="color" class="form-label">Warna (Hex) <span class="text-danger">*</span></label>
                                    <input type="color" class="form-control @error('color') is-invalid @enderror" 
                                           id="color" name="color" value="{{ old('color', '#5E72E4') }}" required>
                                    <small class="form-text text-muted">Pilih warna untuk promo card</small>
                                    @error('color')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group input-group-outline mb-3">
                                    <label for="icon" class="form-label">Icon</label>
                                    <select class="form-control @error('icon') is-invalid @enderror" id="icon" name="icon">
                                        <option value="">Pilih Icon</option>
                                        <option value="monetization_on_rounded" {{ old('icon') == 'monetization_on_rounded' ? 'selected' : '' }}>Monetization</option>
                                        <option value="flash_on_rounded" {{ old('icon') == 'flash_on_rounded' ? 'selected' : '' }}>Flash</option>
                                        <option value="local_offer_rounded" {{ old('icon') == 'local_offer_rounded' ? 'selected' : '' }}>Offer</option>
                                        <option value="card_giftcard_rounded" {{ old('icon') == 'card_giftcard_rounded' ? 'selected' : '' }}>Gift</option>
                                        <option value="star_rounded" {{ old('icon') == 'star_rounded' ? 'selected' : '' }}>Star</option>
                                        <option value="discount_rounded" {{ old('icon') == 'discount_rounded' ? 'selected' : '' }}>Discount</option>
                                    </select>
                                    @error('icon')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="input-group input-group-outline mb-3">
                            <label for="image_url" class="form-label">URL Gambar</label>
                            <input type="url" class="form-control @error('image_url') is-invalid @enderror" 
                                   id="image_url" name="image_url" value="{{ old('image_url') }}" 
                                   placeholder="https://example.com/image.jpg">
                            @error('image_url')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="input-group input-group-outline mb-3">
                                    <label for="order" class="form-label">Urutan</label>
                                    <input type="number" class="form-control @error('order') is-invalid @enderror" 
                                           id="order" name="order" value="{{ old('order', 0) }}" min="0">
                                    @error('order')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group input-group-outline mb-3">
                                    <label for="start_date" class="form-label">Tanggal Mulai</label>
                                    <input type="date" class="form-control @error('start_date') is-invalid @enderror" 
                                           id="start_date" name="start_date" value="{{ old('start_date') }}">
                                    @error('start_date')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="input-group input-group-outline mb-3">
                                    <label for="end_date" class="form-label">Tanggal Berakhir</label>
                                    <input type="date" class="form-control @error('end_date') is-invalid @enderror" 
                                           id="end_date" name="end_date" value="{{ old('end_date') }}">
                                    @error('end_date')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="input-group input-group-outline mb-3">
                            <label for="action_url" class="form-label">URL Aksi</label>
                            <input type="url" class="form-control @error('action_url') is-invalid @enderror" 
                                   id="action_url" name="action_url" value="{{ old('action_url') }}" 
                                   placeholder="URL ketika promo diklik">
                            @error('action_url')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-check mb-3">
                            <input type="checkbox" class="form-check-input" id="is_active" name="is_active" 
                                   {{ old('is_active', true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                Aktifkan Promo
                            </label>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn bg-gradient-primary mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i> Simpan
                            </button>
                            <a href="{{ route('promo.index') }}" class="btn bg-gradient-secondary mb-0">
                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">arrow_back</i> Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection