@extends('layouts.app')

@section('title', 'Ajouter une Marque - Print Manager')

@section('content')
    <div class="container mt-4">
        <div class="form-card">
            <div class="form-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h1 class="mb-0">
                    <i class="fas fa-tag me-2"></i>Ajouter une Marque
                </h1>
                <a href="{{ route('marques.index', ['sort' => request('sort'), 'dir' => request('dir')]) }}" class="btn btn-outline-secondary btn-action">
                    <i class="fas fa-arrow-left me-2"></i>Retour
                </a>
            </div>

            <form action="{{ route('marques.store') }}" method="POST">
                @csrf
                <input type="hidden" name="sort" value="{{ request('sort') }}">
                <input type="hidden" name="dir" value="{{ request('dir') }}">

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="nom" class="form-label">
                            <i class="fas fa-signature me-2"></i>Nom de la marque <span class="text-danger">*</span>
                        </label>
                        <input type="text"
                               class="form-control @error('nom') is-invalid @enderror"
                               id="nom"
                               name="nom"
                               value="{{ old('nom') }}"
                               placeholder="Ex: HP, Dell, Lenovo..."
                               required>
                        @error('nom')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="statut" class="form-label">
                            <i class="fas fa-toggle-on me-2"></i>Statut
                        </label>
                        <div class="form-check form-switch mt-2">
                            <input class="form-check-input"
                                   type="checkbox"
                                   id="statut"
                                   name="statut"
                                   value="1"
                                   {{ old('statut', true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="statut">
                                @if(old('statut', true))
                                    <span class="text-success"><i class="fas fa-check-circle me-1"></i>Actif</span>
                                @else
                                    <span class="text-muted"><i class="fas fa-times-circle me-1"></i>Inactif</span>
                                @endif
                            </label>
                        </div>
                    </div>
                </div>

                <div class="mb-4">
                    <label for="description" class="form-label">
                        <i class="fas fa-align-left me-2"></i>Description
                    </label>
                    <textarea class="form-control @error('description') is-invalid @enderror"
                              id="description"
                              name="description"
                              rows="4"
                              placeholder="Décrivez la marque, son historique, ses spécificités...">{{ old('description') }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <div class="form-text">Optionnel - Quelques mots pour décrire cette marque</div>
                </div>

                <div class="d-flex justify-content-between">
                    <a href="{{ route('marques.index', ['sort' => request('sort'), 'dir' => request('dir')]) }}" class="btn btn-secondary btn-action">
                        <i class="fas fa-times me-2"></i>Annuler
                    </a>
                    <button type="submit" class="btn btn-primary btn-action">
                        <i class="fas fa-save me-2"></i>Enregistrer
                    </button>
                </div>
            </form>
        </div>
    </div>

    <style>
        .form-card {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .form-header {
            border-bottom: 2px solid rgba(255,255,255,0.3);
            padding: 15px 20px;
            margin-bottom: 25px;
            border-radius: 10px 10px 0 0;
        }
        .form-header h1 {
            color: #343a40;
            font-weight: 600;
        }
        .form-label {
            font-weight: 500;
            color: #495057;
            margin-bottom: 8px;
        }
        .form-control, .form-select {
            border-radius: 8px;
            border: 1px solid #dee2e6;
            padding: 10px 15px;
        }
        .form-control:focus, .form-select:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
        }
        .btn-action {
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 500;
        }
        .form-check-input:checked {
            background-color: #198754;
            border-color: #198754;
        }
    </style>
@endsection