@extends('layouts.app')

@section('title', 'تعديل الفئة')

@section('content')
<style>
    .form-container {
        background: white;
        border-radius: 15px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        padding: 2rem;
        margin-top: 2rem;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .form-title {
        color: #333;
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
        text-align: center;
        position: relative;
        padding-bottom: 1rem;
    }
    .form-title:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background: #0d6efd;
        border-radius: 2px;
    }
    .form-label {
        font-weight: 600;
        color: #444;
        margin-bottom: 0.5rem;
    }
    .form-control {
        padding: 0.75rem;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
    .form-control:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    }
    .image-preview {
        margin-top: 1rem;
        text-align: center;
    }
    .current-image {
        max-width: 200px;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }
    .current-image:hover {
        transform: scale(1.05);
    }
    .image-upload-wrapper {
        position: relative;
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        padding: 1.5rem;
        text-align: center;
        transition: all 0.3s ease;
        margin-top: 1rem;
    }
    .image-upload-wrapper:hover {
        border-color: #0d6efd;
    }
    .image-label {
        display: block;
        margin-bottom: 0.5rem;
        color: #666;
    }
    .buttons-wrapper {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin-top: 2rem;
    }
    .btn {
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
    .btn-primary {
        background: #0d6efd;
        border: none;
    }
    .btn-primary:hover {
        background: #0b5ed7;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
    }
    .btn-secondary {
        background: #6c757d;
        border: none;
    }
    .btn-secondary:hover {
        background: #5c636a;
    }
    @media (max-width: 768px) {
        .form-container {
            padding: 1.5rem;
            margin: 1rem;
        }
        .current-image {
            max-width: 150px;
        }
    }
</style>

<div class="container">
    <div class="form-container">
        <h2 class="form-title">تعديل الفئة</h2>
        
        <form action="{{ route('categories.update', $category->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <div class="mb-4">
                <label for="category_name" class="form-label">اسم الفئة:</label>
                <input type="text" name="category_name" id="category_name" 
                       class="form-control @error('category_name') is-invalid @enderror" 
                       value="{{ old('category_name', $category->category_name) }}" required>
                @error('category_name')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-4">
                <label class="form-label">صورة الفئة:</label>
                @if ($category->img)
                    <div class="image-preview">
                        <img src="{{ asset($category->img) }}" 
                             alt="{{ $category->category_name }}" 
                             class="current-image">
                        <span class="image-label mt-2 d-block">الصورة الحالية</span>
                    </div>
                @endif
                
                <div class="image-upload-wrapper">
                    <span class="image-label">اختر صورة جديدة</span>
                    <input type="file" name="img" id="img" 
                           class="form-control @error('img') is-invalid @enderror">
                    @error('img')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="buttons-wrapper">
                <button type="submit" class="btn btn-primary">تحديث</button>
                <a href="{{ route('categories.index') }}" class="btn btn-secondary">رجوع</a>
            </div>
        </form>
    </div>
</div>
@endsection