@extends('layout.mainlayout')
@section('content')

<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="add-item d-flex">
                <div class="page-title">
                    <h4>Product Management</h4>
                    <h6><a href="{{ route('dashboard') }}">Dashboard</a> / Product Management</h6>
                </div>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Product List Card -->
        <div class="card table-list-card">
            <div class="card-body">
                <div class="table-top d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0 fw-semibold">Product List</h5>
                    <div class="d-flex gap-2">
                        <a href="{{ route('admin.product.template') }}" class="btn btn-outline-success px-3">
                            <i data-feather="download" class="me-1"></i> Template
                        </a>
                        <button class="btn btn-info text-white px-3" data-bs-toggle="modal" data-bs-target="#importProductModal">
                            <i data-feather="upload" class="me-1"></i> Import
                        </button>
                        <button class="btn btn-success px-3" data-bs-toggle="modal" data-bs-target="#productModal" id="btnAddProduct">
                            Add
                        </button>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table datane table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>ID <span class="ms-1">⬆</span></th>
                                <th>Category <span class="ms-1">⬆</span></th>
                                <th>Product Name <span class="ms-1">⬆</span></th>
                                <th>Product Price <span class="ms-1">⬆</span></th>
                                <th>Status <span class="ms-1">⬆</span></th>
                                <th>Image <span class="ms-1">⬆</span></th>
                                <th>Action <span class="ms-1">⬆</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($products as $product)
                            <tr>
                                <td>{{ $product->id }}</td>
                                <td>{{ $product->category_name ?? '—' }}</td>
                                <td>{{ $product->name }}</td>
                                <td>Tsh {{ number_format($product->price, 2) }}</td>
                                <td>
                                    <span class="badge {{ $product->status === 'available' ? 'bg-success' : 'bg-secondary' }} px-3 py-1">
                                        {{ $product->status === 'available' ? 'Available' : 'Unavailable' }}
                                    </span>
                                </td>
                                <td>
                                    @if($product->image)
                                        <img src="{{ asset('storage/' . $product->image) }}"
                                             alt="{{ $product->name }}"
                                             class="rounded-circle"
                                             style="width:40px;height:40px;object-fit:cover;">
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    <button class="btn btn-warning btn-sm px-3 edit-product-btn"
                                        data-id="{{ $product->id }}"
                                        data-bs-toggle="modal"
                                        data-bs-target="#productModal">
                                        Edit
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center text-muted py-4">No products found. Click <strong>Add</strong> to create one.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add / Edit Product Modal -->
<div class="modal fade" id="productModal" tabindex="-1" aria-labelledby="productModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="productModalLabel">Add Product</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="productForm" action="{{ route('admin.product.save') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="id" id="prod_id">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Product Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="prod_name" class="form-control" placeholder="e.g. Veg Hot Garlic Steam Momo" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Category <span class="text-danger">*</span></label>
                            <select name="category_id" id="prod_category" class="form-select" required>
                                <option value="">-- Select Category --</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Price (Tsh) <span class="text-danger">*</span></label>
                            <input type="number" name="price" id="prod_price" class="form-control" step="0.01" min="0" placeholder="0.00" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Kitchen Section <span class="text-danger">*</span></label>
                            <select name="kitchen_section" id="prod_kitchen" class="form-select" required>
                                <option value="MAIN_KITCHEN">Main Kitchen</option>
                                <option value="BBQ">BBQ</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Status <span class="text-danger">*</span></label>
                            <select name="status" id="prod_status" class="form-select" required>
                                <option value="available">Available</option>
                                <option value="unavailable">Unavailable</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Product Image</label>
                            <input type="file" name="image" id="prod_image" class="form-control" accept="image/*">
                            <div id="currentImagePreview" class="mt-2 d-none">
                                <small class="text-muted">Current image: </small>
                                <img id="currentImg" src="" alt="current" style="width:50px;height:50px;object-fit:cover;" class="rounded">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Save Product</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Import Products Modal -->
<div class="modal fade" id="importProductModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Bulk Upload Products</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.product.import') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info py-2" style="font-size:13px;">
                        <i data-feather="info" class="me-1"></i> 
                        Please download the template first to ensure correct formatting.
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Choose Excel File (.xlsx, .xls)</label>
                        <input type="file" name="file" class="form-control" accept=".xlsx, .xls, .csv" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-info text-white fw-semibold">Begin Import</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
(function() {
    function initPage() {
        if (typeof jQuery === 'undefined') { setTimeout(initPage, 50); return; }
        jQuery(document).ready(function($) {

            // Reset on modal close
            $('#productModal').on('hidden.bs.modal', function() {
                $('#productForm')[0].reset();
                $('#prod_id').val('');
                $('#productModalLabel').text('Add Product');
                $('#currentImagePreview').addClass('d-none');
            });

            // Add button
            $('#btnAddProduct').on('click', function() {
                $('#productModalLabel').text('Add Product');
                $('#prod_id').val('');
                $('#productForm')[0].reset();
                $('#currentImagePreview').addClass('d-none');
            });

            // Edit product
            $(document).on('click', '.edit-product-btn', function() {
                const id = $(this).data('id');
                $('#productModalLabel').text('Edit Product');
                $.ajax({
                    url: '{{ route("admin.product.get", ":id") }}'.replace(':id', id),
                    type: 'GET',
                    success: function(res) {
                        if (res.success) {
                            const p = res.data;
                            $('#prod_id').val(p.id);
                            $('#prod_name').val(p.name);
                            $('#prod_category').val(p.category_id);
                            $('#prod_price').val(p.price);
                            $('#prod_kitchen').val(p.kitchen_section);
                            $('#prod_status').val(p.status);
                            if (p.image) {
                                $('#currentImg').attr('src', '/storage/' + p.image);
                                $('#currentImagePreview').removeClass('d-none');
                            } else {
                                $('#currentImagePreview').addClass('d-none');
                            }
                        }
                    },
                    error: function() { alert('Failed to load product data.'); }
                });
            });
        });
    }
    initPage();
})();
</script>

@endsection