@extends('backend.layout.app')

@section('content')
<div class="container">
    <div class="container-header">
        <h1>{{ $title }}</h1>
        <a href="{{ route('backend.products.index') }}" class="btn btn-outline"><i class="las la-arrow-left"></i> Back to products</a>
    </div>

    <form action="{{ route('backend.products.store') }}" method="post" enctype="multipart/form-data" class="product-form">
        @csrf

        <div class="card mb-25 product-form-card">
            <div class="card-body">
                <h2 class="product-form-section-title"><i class="las la-info-circle"></i> Basic information</h2>
                <div class="row">
                    <div class="form-group width-50">
                        <label class="form-label">Product name<span class="required">*</span></label>
                        <input type="text" class="form-control" name="name" value="{{ old('name') }}" placeholder="e.g. Instagram Account Pack" required>
                    </div>
                    <div class="form-group width-50">
                        <label class="form-label">Category<span class="required">*</span></label>
                        <select class="form-control" name="product_category_id" required>
                            <option value="">Select category</option>
                            @foreach($categories as $c)
                            <option value="{{ $c->id }}" {{ old('product_category_id') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group width-50">
                        <label class="form-label">Price<span class="required">*</span></label>
                        <input type="number" step="0.01" min="0" class="form-control" name="price" value="{{ old('price') }}" placeholder="0.00" required>
                    </div>
                    <div class="form-group width-50">
                        <label class="form-label">Status</label>
                        <select class="form-control" name="status">
                            <option value="1" {{ old('status', '1') == '1' ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Description</label>
                    <textarea class="form-control form-control-textarea" name="description" rows="4" placeholder="Optional product description">{{ old('description') }}</textarea>
                </div>
            </div>
        </div>

        <div class="card mb-25 product-form-card">
            <div class="card-body">
                <h2 class="product-form-section-title"><i class="las la-image"></i> Product image</h2>
                <div class="product-form-image-wrap">
                    <div class="product-form-image-preview" id="product-image-preview">
                        <div class="product-form-image-placeholder" id="product-image-placeholder">
                            <i class="las la-image"></i>
                            <span>No image chosen</span>
                        </div>
                        <img src="" alt="" id="product-image-preview-img" class="product-form-image-preview-img--hidden">
                    </div>
                    <div class="product-form-image-actions">
                        <label class="btn btn-primary product-form-file-label">
                            <i class="las la-upload"></i> Choose image
                            <input type="file" class="product-form-file-input" name="image" id="product-image-input" accept="image/*">
                        </label>
                        <span class="product-form-file-hint">JPG, PNG or GIF. Max 2MB.</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-25 product-form-card">
            <div class="card-body">
                <h2 class="product-form-section-title"><i class="las la-file-alt"></i> Import accounts (optional)</h2>
                <p class="product-form-section-desc">Upload a TXT file with one account per line. You can add more accounts later from the product's Accounts page.</p>
                <div class="product-form-upload-zone" id="product-accounts-upload-zone">
                    <input type="file" class="product-form-file-input product-form-file-input--zone" name="file" id="product-accounts-input" accept=".txt">
                    <div class="product-form-upload-zone-content">
                        <i class="las la-cloud-upload-alt product-form-upload-icon"></i>
                        <span class="product-form-upload-text">Drop your .txt file here or <strong>browse</strong></span>
                        <span class="product-form-upload-hint" id="product-accounts-filename"></span>
                    </div>
                </div>
                <div class="product-form-demo-link">
                    <a href="{{ route('backend.products.demo-txt') }}" class="btn btn-outline btn-sm"><i class="las la-download"></i> Download demo format</a>
                </div>
            </div>
        </div>

        <div class="product-form-submit">
            <button type="submit" class="btn btn-primary btn-lg">
                <i class="las la-plus"></i> Add product
            </button>
        </div>
    </form>
</div>
@endsection
