@extends('admin.layout')

@section('content')
<div class="content-card" style="max-width: 800px; margin: 0 auto;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
        <h3 style="margin: 0; border: none; padding: 0;">Add New Product</h3>
        <a href="{{ route('admin.products.index') }}" style="color: #555; text-decoration: none;"><i class="fa-solid fa-arrow-left"></i> Back to List</a>
    </div>

    @if ($errors->any())
        <div style="background-color: #fdecea; color: #d32f2f; padding: 15px; border-radius: 6px; margin-bottom: 20px;">
            <ul style="margin: 0; padding-left: 20px;">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.products.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        
        <div style="margin-bottom: 20px;">
            <label for="name" style="display: block; font-weight: 500; margin-bottom: 8px;">1) Products Name <span style="color: red;">*</span></label>
            <input type="text" name="name" id="name" value="{{ old('name') }}" required style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; font-family: inherit;">
        </div>

        <div style="margin-bottom: 20px;">
            <label for="description" style="display: block; font-weight: 500; margin-bottom: 8px;">2) Description</label>
            <textarea name="description" id="description" rows="5" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; font-family: inherit; resize: vertical;">{{ old('description') }}</textarea>
        </div>

        <div style="margin-bottom: 20px;">
            <label for="photo" style="display: block; font-weight: 500; margin-bottom: 8px;">3) Products Photo</label>
            <input type="file" name="photo" id="photo" accept="image/*" style="width: 100%; padding: 10px; border: 1px dashed #bbb; border-radius: 6px; background: #fcfcfc;">
        </div>

        <div style="margin-bottom: 20px;">
            <label for="price" style="display: block; font-weight: 500; margin-bottom: 8px;">4) Products Price <span style="color: #888; font-size: 13px; font-weight: normal;">(Optional)</span></label>
            <input type="number" step="0.01" name="price" id="price" value="{{ old('price') }}" placeholder="e.g. 500.00" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 15px; font-family: inherit;">
        </div>

        <div style="margin-bottom: 30px;">
            <label for="url" style="display: block; font-weight: 500; margin-bottom: 8px;">5) Products URL <span style="color: #888; font-size: 13px; font-weight: normal;">(Auto-generated if empty)</span></label>
            <div style="display: flex; align-items: center;">
                <span style="background: #f0f0f0; padding: 12px 15px; border: 1px solid #ddd; border-right: none; border-radius: 6px 0 0 6px; color: #666; font-size: 14px;">{{ url('/') }}/product/</span>
                <input type="text" name="url" id="url" value="{{ old('url') }}" placeholder="custom-product-url" style="flex-grow: 1; padding: 12px; border: 1px solid #ddd; border-radius: 0 6px 6px 0; font-size: 15px; font-family: inherit;">
            </div>
        </div>

        
        <div style="margin-bottom: 30px; display: flex; align-items: center; gap: 10px;">
            <input type="checkbox" name="is_hidden" id="is_hidden" value="1" style="width: 20px; height: 20px; cursor: pointer;">
            <label for="is_hidden" style="font-weight: 500; cursor: pointer;">Hide this product (It won't show on the website)</label>
        </div>
        <button type="submit" style="background-color: #2e7d32; color: white; padding: 14px 25px; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; width: 100%; transition: background 0.3s;">
            <i class="fa-solid fa-check"></i> Publish Product
        </button>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const nameInput = document.getElementById('name');
        const urlInput = document.getElementById('url');
        
        // Track if user has manually typed in the URL field
        let isUrlPristine = !urlInput.value;
        
        urlInput.addEventListener('input', function() {
            isUrlPristine = false;
            if (this.value === '') isUrlPristine = true;
        });

        nameInput.addEventListener('input', function() {
            if (isUrlPristine) {
                // Simple slugify function
                let slug = this.value.toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/[\s-]+/g, '-')
                    .replace(/^-+|-+$/g, '');
                urlInput.value = slug;
            }
        });
    });
</script>
@endsection