@extends('admin.master')

@section('content')
@include('admin.inventory._styles')

<div class="ip-shell">
    @if($errors->any())
        <div class="ip-alert error">
            @foreach($errors->all() as $error)
                <div>{{ $error }}</div>
            @endforeach
        </div>
    @endif

    <form
        method="POST"
        enctype="multipart/form-data"
        action="{{ $editing ? route('admin.suppliers.update', $supplier) : route('admin.suppliers.store') }}"
    >
        @csrf
        @if($editing)
            @method('PUT')
        @endif

        <div class="ip-head">
            <div class="ip-head-left">
                <a class="ip-btn ip-btn-sm" href="{{ route('admin.suppliers.index') }}">← Back</a>

                <div>
                    <h1 class="ip-title">{{ $editing ? 'Edit Supplier' : 'Add Supplier' }}</h1>
                    <p class="ip-subtitle">
                        {{ $editing ? 'Update supplier information and status.' : 'Create a supplier for purchase and inventory records.' }}
                    </p>
                </div>
            </div>

            <button class="ip-btn ip-btn-primary" type="submit">✓ {{ $editing ? 'Update' : 'Publish' }}</button>
        </div>

        <section class="ip-card ip-section">
            <div class="ip-section-head">
                <h2 class="ip-section-title">▱ Supplier Details</h2>
            </div>

            <div class="ip-section-body">
                <div class="ip-grid-2">
                    <div class="ip-field">
                        <label class="ip-label" for="supplier_name">Name <span class="ip-required">*</span></label>
                        <input
                            class="ip-input"
                            id="supplier_name"
                            type="text"
                            name="name"
                            value="{{ old('name', $supplier->name) }}"
                            placeholder="Supplier name"
                            required
                        >
                    </div>

                    <div class="ip-field">
                        <label class="ip-label" for="supplier_phone">Phone <span class="ip-required">*</span></label>
                        <input
                            class="ip-input"
                            id="supplier_phone"
                            type="text"
                            name="phone"
                            value="{{ old('phone', $supplier->phone) }}"
                            placeholder="01712345678"
                            required
                        >
                    </div>

                    <div class="ip-field">
                        <label class="ip-label" for="supplier_address">Address</label>
                        <input
                            class="ip-input"
                            id="supplier_address"
                            type="text"
                            name="address"
                            value="{{ old('address', $supplier->address) }}"
                            placeholder="Location, District, Division"
                        >
                    </div>

                    <div class="ip-field">
                        <label class="ip-label">Image</label>

                        <label class="ip-upload">
                            ☁ Click or Drag &amp; Drop Your Image Here
                            <input id="supplierImageInput" type="file" name="image" accept="image/jpeg,image/png,image/webp">
                        </label>

                        <div class="ip-preview">
                            <span class="ip-avatar" id="supplierImagePreview">
                                @if($supplier->imageUrl())
                                    <img src="{{ $supplier->imageUrl() }}" alt="{{ $supplier->name }}">
                                @else
                                    🏢
                                @endif
                            </span>
                            <span id="supplierFileName">{{ $supplier->image ? basename($supplier->image) : 'No file uploaded' }}</span>
                        </div>

                        @if($editing && $supplier->image)
                            <label class="ip-help" style="display:flex;align-items:center;gap:7px;margin-top:9px">
                                <input type="checkbox" name="remove_image" value="1">
                                Remove current image
                            </label>
                        @endif
                    </div>
                </div>

                <div class="ip-grid-2" style="margin-top:17px">
                    <div class="ip-field">
                        <label class="ip-label" for="supplier_email">Email</label>
                        <input
                            class="ip-input"
                            id="supplier_email"
                            type="email"
                            name="email"
                            value="{{ old('email', $supplier->email) }}"
                            placeholder="supplier@example.com"
                        >
                    </div>
                </div>

                <div class="ip-toggle-row">
                    <input type="hidden" name="is_active" value="0">
                    <label class="ip-switch">
                        <input
                            type="checkbox"
                            name="is_active"
                            value="1"
                            @checked(old('is_active', $supplier->exists ? $supplier->is_active : true))
                        >
                        <span></span>
                    </label>

                    <div>
                        <div class="ip-label" style="margin:0">Active Status</div>
                        <div class="ip-help" style="margin-top:3px">Enable or disable this supplier</div>
                    </div>
                </div>
            </div>
        </section>
    </form>
</div>

<script>
(() => {
    const input = document.getElementById('supplierImageInput');
    const preview = document.getElementById('supplierImagePreview');
    const fileName = document.getElementById('supplierFileName');

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

        fileName.textContent = file.name;
        const url = URL.createObjectURL(file);
        preview.innerHTML = `<img src="${url}" alt="Preview">`;
    });
})();
</script>
@endsection