{{-- resources/views/admin/suppliers/create.blade.php --}}
@extends('admin.layouts.master')

@section('title', 'إضافة مورد')

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <style>
        .form-hint { font-size: 12px; color: #64748b; }
        .required:after { content: " *"; color: #dc2626; font-weight: 700; }

        /* Switch */
        .switch { position: relative; display: inline-block; width: 46px; height: 24px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider {
            position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
            background-color: #dc3545; transition: .4s; border-radius: 24px;
        }
        .slider:before {
            position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
            background-color: white; transition: .4s; border-radius: 50%;
        }
        input:checked + .slider { background-color: #198754; }
        input:checked + .slider:before { transform: translateX(22px); }

        /* Preview */
        .img-preview {
            width: 96px; height: 96px; border-radius: 16px; object-fit: cover;
            border: 1px solid #e5e7eb; background: #f8fafc;
        }
        .card-header h6 { margin: 0; }
    </style>
@endsection

@section('content')

    <div class="content-header mb-3">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-0">إضافة مورد</h5>
                <small class="text-muted">إنشاء بطاقة مورد + بيانات محاسبية (رصيد افتتاحي)</small>
            </div>

            <div class="d-flex gap-2">
                <a href="{{ route('suppliers.index') }}" class="btn btn-sm btn-light">رجوع</a>
                <button form="supplierForm" class="btn btn-sm btn-primary">
                    <i class="ti ti-plus"></i>
                    حفظ المورد
                </button>
            </div>
        </div>
    </div>

    @include('admin.Alerts')

    <form id="supplierForm" action="{{ route('suppliers.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="row">

            {{-- Right: Main Data --}}
            <div class="col-lg-8 mb-3">

                {{-- Basic Info --}}
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6>البيانات الأساسية</h6>
                        <span class="badge bg-light text-dark">Supplier Card</span>
                    </div>
                    <div class="card-body">

                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label required">اسم المورد</label>
                                <input type="text" name="name" required class="form-control @error('name') is-invalid @enderror"
                                       value="{{ old('name') }}" placeholder="مثال: شركة النور للتوريدات">
                                @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                <div class="form-hint">اكتب الاسم كما يظهر في فواتير الشراء.</div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label required">تصنيف المورد</label>
                                <select name="supplier_category_id" required class="form-select @error('supplier_category_id') is-invalid @enderror">
                                    <option value="">اختر التصنيف</option>
                                    @foreach(($categories ?? []) as $cat)
                                        <option value="{{ $cat->id }}" @selected((string)old('supplier_category_id') === (string)$cat->id)>
                                            {{ $cat->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('supplier_category_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                <div class="form-hint">اختيار التصنيف يساعد في التقارير والفلاتر.</div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">رقم الهاتف</label>
                                <input type="text" name="phone"  required class="form-control @error('phone') is-invalid @enderror"
                                       value="{{ old('phone') }}" placeholder="01xxxxxxxxx">
                                @error('phone') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">البريد الإلكتروني</label>
                                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                                       value="{{ old('email') }}" placeholder="supplier@email.com">
                                @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">المدينة</label>
                                <input type="text" name="city" class="form-control @error('city') is-invalid @enderror"
                                       value="{{ old('city') }}" placeholder="القاهرة / الجيزة ...">
                                @error('city') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                        </div>

                    </div>
                </div>

                {{-- Accounting --}}
                <div class="card mt-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6>البيانات المحاسبية</h6>
                        <span class="badge bg-warning-subtle text-warning">Accounting</span>
                    </div>
                    <div class="card-body">

                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label">تاريخ فتح الحساب</label>
                                <input type="date" name="date" class="form-control @error('date') is-invalid @enderror"
                                       value="{{ old('date', now()->toDateString()) }}">
                                @error('date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                <div class="form-hint">يفضل تاريخ بداية التعامل المحاسبي مع المورد.</div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">الرصيد الافتتاحي</label>
                                <input type="number" step="0.01" name="start_balance"
                                       class="form-control @error('start_balance') is-invalid @enderror"
                                       value="{{ old('start_balance', 0) }}">
                                @error('start_balance') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                <div class="form-hint">
                                    ملاحظة محاسبية: موجب = المورد <b>دائن</b> (عليك له) ، سالب = المورد <b>مدين</b> (له عليك/سلفة).
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">الرصيد الحالي (اختياري)</label>
                                <input type="number" step="0.01" name="current_balance" readonly
                                       class="form-control @error('current_balance') is-invalid @enderror"
                                       value="{{ old('current_balance') }}"
                                       placeholder="سيُملأ تلقائيًا مثل الافتتاحي">
                                @error('current_balance') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                <div class="form-hint">يفضل تركه فارغ كبداية (النظام يساويه بالرصيد الافتتاحي).</div>
                            </div>

                        </div>

                    </div>
                </div>

                {{-- Notes --}}
                <div class="card mt-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6>ملاحظات</h6>
                        <span class="badge bg-light text-dark">Optional</span>
                    </div>
                    <div class="card-body">
                        <textarea name="notes" rows="4" class="form-control @error('notes') is-invalid @enderror"
                                  placeholder="أي ملاحظات تخص المورد (عنوان، بيانات ضريبية، شروط دفع...)">{{ old('notes') }}</textarea>
                        @error('notes') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        <div class="form-hint">مثال: شروط دفع 30 يوم / رقم سجل / بيانات ضريبية.</div>
                    </div>
                </div>

            </div>

            {{-- Left: Side Card --}}
            <div class="col-lg-4 mb-3">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6>الإعدادات</h6>
                        <span class="badge bg-success-subtle text-success">Status</span>
                    </div>
                    <div class="card-body">

                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <div>
                                <label class="form-label mb-1">الحالة</label>
                                <div class="form-hint">نشط يظهر في المشتريات والمعاملات.</div>
                            </div>

                            <label class="switch">
                                <input type="checkbox" name="status" value="1" {{ old('status', 1) ? 'checked' : '' }}>
                                <span class="slider"></span>
                            </label>
                        </div>

                        <hr>

                        <div class="mb-2">
                            <label class="form-label">صورة المورد (اختياري)</label>
                            <input type="file" name="image" id="imageInput"
                                   class="form-control @error('image') is-invalid @enderror"
                                   accept="image/*">
                            @error('image') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            <div class="form-hint">JPG / PNG / WEBP — حد أقصى 2MB.</div>
                        </div>

                        <div class="d-flex align-items-center gap-3 mt-3">
                            <img id="imgPreview" class="img-preview"
                                 src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect width='100%25' height='100%25' fill='%23f1f5f9'/%3E%3Ctext x='50%25' y='52%25' dominant-baseline='middle' text-anchor='middle' fill='%2364748b' font-size='10'%3ENo Image%3C/text%3E%3C/svg%3E"
                                 alt="preview">
                            <div>
                                <div class="fw-semibold">معاينة الصورة</div>
                                <div class="text-muted" style="font-size: 12px;">هتظهر في بطاقة المورد (اختياري).</div>
                            </div>
                        </div>

                        <hr>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="ti ti-device-floppy"></i>
                                حفظ المورد
                            </button>
                            <a href="{{ route('suppliers.index') }}" class="btn btn-light">إلغاء</a>
                        </div>
                    </div>
                </div>

                <div class="alert alert-warning mt-3 mb-0">
                    <div class="fw-semibold mb-1">تنبيه محاسبي</div>
                    <div style="font-size: 13px;">
                        الأفضل عمليًا أن <b>الرصيد الحالي</b> يتحدث من القيود/الفواتير،
                        ويكون تخزينه فقط كـ Cache لو عندك تحديث تلقائي مع كل حركة.
                    </div>
                </div>
            </div>

        </div>
    </form>

@endsection

@section('js')
    <script>
        const input = document.getElementById('imageInput');
        const preview = document.getElementById('imgPreview');

        if (input) {
            input.addEventListener('change', function () {
                const file = this.files && this.files[0];
                if (!file) return;

                const reader = new FileReader();
                reader.onload = (e) => preview.src = e.target.result;
                reader.readAsDataURL(file);
            });
        }
    </script>
@endsection