@extends('layouts.admin')

@section('title', 'Edit Item')
@section('page-title', 'Edit Item')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('item-library.index') }}">Item Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Edit</li>
@endsection

@section('content')
<div class="card card-primary card-outline mb-4">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h3 class="card-title">
                    <i class="bi bi-pencil-square me-1"></i> Editing: <strong>{{ $item->name }}</strong>
                    <span class="badge text-bg-{{ $item->is_active ? 'success' : 'danger' }} ms-2">
                        {{ $item->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </h3>
            </div>
            <div class="card-tools">
                <a href="{{ route('item-library.index') }}" class="btn btn-secondary btn-sm">
                    <i class="bi bi-arrow-left me-1"></i> Back to Library
                </a>
            </div>
        </div>
    </div>
    
    <div class="card-body">
        <form action="{{ route('item-library.update', $item) }}" method="POST">
            @csrf
            @method('PUT')
            
            <div class="row g-3 mb-3">
                <div class="col-md-6">
                    <label for="name" class="form-label">Item Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" 
                           id="name" name="name" value="{{ old('name', $item->name) }}" required>
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                    <label for="category" class="form-label">Category</label>
                    <input type="text" class="form-control @error('category') is-invalid @enderror" 
                           id="category" name="category" value="{{ old('category', $item->category) }}" 
                           placeholder="e.g., Photography" list="categorySuggestions">
                    <datalist id="categorySuggestions">
                        @foreach($categories as $category)
                            <option value="{{ $category }}">
                        @endforeach
                    </datalist>
                    @error('category')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <div class="form-text">Type to see existing categories or create a new one.</div>
                </div>
            </div>

            <div class="mb-3">
                <label for="description" class="form-label">Description <span class="text-danger">*</span></label>
                <textarea class="trumbowyg form-control @error('description') is-invalid @enderror" 
                          id="description" name="description" rows="5" required>{{ old('description', $item->description) }}</textarea>
                @error('description')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="row g-3 mb-4 align-items-center">
                <div class="col-md-6">
                    <label for="default_price" class="form-label">Default Price (RM)</label>
                    <div class="input-group">
                        <span class="input-group-text">RM</span>
                        <input type="number" step="0.01" class="form-control @error('default_price') is-invalid @enderror" 
                               id="default_price" name="default_price" value="{{ old('default_price', $item->default_price) }}" min="0">
                        @error('default_price')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="col-md-6">
                    <label class="form-label d-block">Status</label>
                    <div class="form-check form-switch pt-1">
                        <input class="form-check-input" type="checkbox" role="switch" id="is_active" 
                               name="is_active" value="1" {{ $item->is_active ? 'checked' : '' }}>
                        <label class="form-check-label fw-bold" for="is_active">Active</label>
                    </div>
                </div>
            </div>

            <hr class="my-4">

            <div class="d-flex justify-content-start gap-2">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-floppy me-1"></i> Update Item
                </button>
                <a href="{{ route('item-library.index') }}" class="btn btn-secondary">
                    <i class="bi bi-x-lg me-1"></i> Cancel
                </a>
            </div>
        </form>
    </div>
</div>

<div class="row">
    <!-- Activity Log -->
    <div class="col-md-6">
        <div class="card card-secondary card-outline mb-4">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="bi bi-clock-history me-1"></i> Item Details
                </h3>
            </div>
            <div class="card-body p-0">
                <table class="table table-sm align-middle mb-0">
                    <tbody>
                        <tr>
                            <td class="ps-3" style="width: 140px;"><strong>ID</strong></td>
                            <td class="pe-3"><code>#{{ $item->id }}</code></td>
                        </tr>
                        <tr>
                            <td class="ps-3"><strong>Created At</strong></td>
                            <td class="pe-3">{{ $item->created_at->format('d/m/Y H:i:s') }}</td>
                        </tr>
                        <tr>
                            <td class="ps-3"><strong>Last Updated</strong></td>
                            <td class="pe-3">{{ $item->updated_at->format('d/m/Y H:i:s') }}</td>
                        </tr>
                        <tr>
                            <td class="ps-3"><strong>Status</strong></td>
                            <td class="pe-3">
                                @if($item->is_active)
                                    <span class="badge text-bg-success">Active</span>
                                @else
                                    <span class="badge text-bg-danger">Inactive</span>
                                @endif
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Preview -->
    <div class="col-md-6">
        <div class="card card-info card-outline mb-4">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="bi bi-eye me-1"></i> Preview
                </h3>
            </div>
            <div class="card-body">
                <div class="alert alert-info d-flex align-items-center mb-3" role="alert">
                    <i class="bi bi-info-circle-fill me-2 flex-shrink-0"></i>
                    <div>This is how the item will appear when added to an invoice:</div>
                </div>
                <div class="p-3 border rounded bg-body-tertiary">
                    <h5 class="fw-bold">{{ $item->name }}</h5>
                    <p class="mb-2 text-body-secondary" style="white-space: pre-line;">
                        {!! $item->description !!}
                    </p>
                    <div class="d-flex align-items-center justify-content-between pt-2 border-top">
                        <span><strong>Price:</strong> RM {{ number_format($item->default_price, 2) }}</span>
                        @if($item->category)
                            <span class="badge text-bg-info">{{ $item->category }}</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection