@extends('Kitchen.layout')

@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">

<link
    rel="stylesheet"
    href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"
>

<style>
    .dt-search {
        display: none;
    }

    .product-image {
        width: 55px;
        height: 55px;
        object-fit: cover;
        border-radius: 7px;
        border: 1px solid #ddd;
    }

    .category-image {
        width: 45px;
        height: 45px;
        object-fit: cover;
        border-radius: 7px;
        border: 1px solid #ddd;
    }
</style>

{{-- Page Header --}}
<div class="row align-items-center justify-content-between mb-3 mt-3">

    <div class="col-auto">
        <div class="d-flex align-items-center gap-3">

          <a
    href="{{ route('kitchen.add_category') }}"
    class="btn btn-outline-secondary"
>
    <i class="ti tabler-arrow-left me-1"></i>
    Back
</a>

            <div>
                <h5 class="mb-1">
                    <i class="ti tabler-package me-2"></i>
                    {{ $category->category }} Products
                </h5>

                <small class="text-muted">
                    Products available under
                    {{ $category->category }}
                </small>
            </div>

        </div>
    </div>

    <div class="col-auto">
        <span class="badge bg-primary px-3 py-2">
            Total Products: {{ $products->count() }}
        </span>
    </div>

</div>

{{-- Category Details --}}
<div class="card mb-3">
    <div class="card-body">

        <div class="d-flex align-items-center gap-3">

            @php
                $categoryImage = null;

                if (!empty($category->image)) {
                    if (
                        str_starts_with($category->image, 'http://') ||
                        str_starts_with($category->image, 'https://')
                    ) {
                        $categoryImage = $category->image;
                    } else {
                        $categoryImage = asset(
                            'storage/' . $category->image
                        );
                    }
                }
            @endphp

            @if($categoryImage)
                <img
                    src="{{ $categoryImage }}"
                    alt="{{ $category->category }}"
                    class="category-image"
                >
            @else
                <div
                    class="category-image d-flex align-items-center justify-content-center bg-light"
                >
                    <i class="ti tabler-category"></i>
                </div>
            @endif

            <div>
                <h6 class="mb-1">
                    {{ $category->category }}
                </h6>

                <small class="text-muted">
                    Category ID: {{ $category->id }}
                </small>
            </div>

        </div>

    </div>
</div>

{{-- Product Table --}}
<div class="card p-0">

    <div class="row mb-3 align-items-center p-3 g-2">

        <div class="col-md-2">
            <select
                id="pageLength"
                class="form-select"
            >
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
        </div>

        <div class="col-md-4 ms-auto">
            <input
                type="text"
                id="searchInput"
                class="form-control"
                placeholder="Search product name, ID or code"
            >
        </div>

    </div>

    <div class="table-responsive pt-0 pb-2">

        <table
            class="table table-hover align-middle"
            id="productsTable"
        >
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Image</th>
                    <th>Product ID</th>
                    <th>Product Name</th>
                    <th>Weight Machine ID</th>
                    <th>Unit</th>
                    <th>MRP</th>
                    <th>Price</th>
                    <th>Stock</th>
                    <th>Status</th>
                </tr>
            </thead>

            <tbody>

                @forelse($products as $product)

                    @php
                        $productImage = null;

                        $images = $product->images;

                        /*
                        |--------------------------------------------------------------------------
                        | Handle cast array, JSON and normal string
                        |--------------------------------------------------------------------------
                        */

                        if (is_array($images) && !empty($images)) {
                            $productImage = $images[0] ?? null;
                        } elseif (is_string($images)) {
                            $decodedImages = json_decode(
                                $images,
                                true
                            );

                            if (
                                json_last_error() === JSON_ERROR_NONE &&
                                is_array($decodedImages)
                            ) {
                                $productImage = $decodedImages[0] ?? null;
                            } elseif (!empty($images)) {
                                $productImage = $images;
                            }
                        }

                        /*
                        |--------------------------------------------------------------------------
                        | Build complete image URL
                        |--------------------------------------------------------------------------
                        */

                        if (!empty($productImage)) {
                            if (
                                !str_starts_with($productImage, 'http://') &&
                                !str_starts_with($productImage, 'https://')
                            ) {
                                $productImage = asset(
                                    'storage/' . ltrim(
                                        $productImage,
                                        '/'
                                    )
                                );
                            }
                        }
                    @endphp

                    <tr>
                        <td>{{ $loop->iteration }}</td>

                        <td>
                            @if($productImage)
                                <img
                                    src="{{ $productImage }}"
                                    alt="{{ $product->product_name }}"
                                    class="product-image"
                                >
                            @else
                                <span class="text-muted">
                                    No Image
                                </span>
                            @endif
                        </td>

                        <td>
                            {{ $product->product_id ?? $product->id }}
                        </td>

                        <td>
                            <span class="fw-semibold">
                                {{ $product->product_name }}
                            </span>
                        </td>

                        <td>
                            {{ $product->weight_machine_id ?? '-' }}
                        </td>

                        <td>
                            @if(!empty($product->unit_value))
                                {{ $product->unit_value }}
                            @endif

                            {{ $product->unit ?? '-' }}
                        </td>

                        <td>
                            ₹{{ number_format(
                                (float) ($product->mrp ?? 0),
                                2
                            ) }}
                        </td>

                        <td>
                            ₹{{ number_format(
                                (float) ($product->price ?? 0),
                                2
                            ) }}
                        </td>

                        <td>
                            @if((float) $product->stock <= 0)
                                <span class="badge bg-danger">
                                    {{ $product->stock ?? 0 }}
                                </span>
                            @elseif((float) $product->stock <= 5)
                                <span class="badge bg-warning">
                                    {{ $product->stock }}
                                </span>
                            @else
                                <span class="badge bg-success">
                                    {{ $product->stock }}
                                </span>
                            @endif
                        </td>

                        <td>
                            @if((bool) $product->is_active)
                                <span class="badge bg-success">
                                    Active
                                </span>
                            @else
                                <span class="badge bg-secondary">
                                    Inactive
                                </span>
                            @endif
                        </td>
                    </tr>

                @empty

                    <tr>
                        <td
                            colspan="10"
                            class="text-center py-4 text-muted"
                        >
                            <i
                                class="ti tabler-package-off fs-2 d-block mb-2"
                            ></i>

                            No products found under this category.
                        </td>
                    </tr>

                @endforelse

            </tbody>
        </table>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready(function () {

    @if($products->count() > 0)

        const table = $('#productsTable').DataTable({
            pageLength: 10,
            searching: true,
            ordering: true,
            lengthChange: false,
            order: [],
            columnDefs: [
                {
                    targets: [0, 1],
                    orderable: false,
                    searchable: false
                }
            ]
        });

        $('#pageLength').on('change', function () {
            table.page
                .len($(this).val())
                .draw();
        });

        $('#searchInput').on('keyup', function () {
            table.search(this.value).draw();
        });

    @endif

});
</script>

@endsection