@extends('master.app')
@section('title', 'Stock')

@section('body')
<main class="app-content">
    <div class="card border-0 shadow-sm" style="border-radius:18px; overflow:hidden;">
        {{-- Header --}}
        <div class="p-3 p-md-4 border-bottom"
             style="background:linear-gradient(135deg, rgba(13,110,253,.12), rgba(102,16,242,.06));">
            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                <div>
                    <h5 class="mb-1 fw-bold"><i class="fa fa-boxes me-1"></i> Stock Management</h5>
                    <div class="text-muted small">International style • Filters • Barcode • Daily IN/OUT • Transfer</div>
                </div>

                <div class="d-flex flex-wrap gap-2">
                    @if(\Illuminate\Support\Facades\Route::has('stock.daily'))
                        <a href="{{ route('stock.daily') }}" class="btn btn-sm btn-dark" style="border-radius:10px;">
                            <i class="fa fa-calendar-day me-1"></i> Daily History
                        </a>
                    @endif

                    @if(\Illuminate\Support\Facades\Route::has('stock.transfer.create'))
                        <a href="{{ route('stock.transfer.create') }}" class="btn btn-sm btn-secondary" style="border-radius:10px;">
                            <i class="fa fa-random me-1"></i> Transfer
                        </a>
                    @endif

                    <a href="{{ route('stocks.create') }}" class="btn btn-sm btn-primary" style="border-radius:10px;">
                        <i class="fa fa-plus me-1"></i> Add Stock
                    </a>
                </div>
            </div>
        </div>

        <div class="card-body p-3 p-md-4">
            @include('general.valert')

            {{-- Summary Cards --}}
            <div class="row g-2 mb-3">
                <div class="col-md-4">
                    <div class="p-3 border bg-light" style="border-radius:14px;">
                        <div class="text-muted small">Total Qty</div>
                        <div class="fw-bold fs-5">{{ number_format((float)$totalQty, 2) }}</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="p-3 border bg-light" style="border-radius:14px;">
                        <div class="text-muted small">Low Stock Items</div>
                        <div class="fw-bold fs-5">{{ $lowCount }}</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="p-3 border bg-light" style="border-radius:14px;">
                        <div class="text-muted small">Warehouses</div>
                        <div class="fw-bold fs-5">{{ $location->count() }}</div>
                    </div>
                </div>
            </div>

            {{-- Filter Bar --}}
            <div class="border bg-light p-3 p-md-3 mb-3" style="border-radius:14px;">
                <form method="GET" action="{{ route('stocks.index') }}">
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-2">
                        <div class="fw-bold">
                            <i class="fa fa-filter me-1"></i> Filters
                            @if(request()->hasAny(['q','cat_id','sub_cat_id','unit_id','weight_id','location_id','low','per_page','sort','dir']))
                                <span class="badge bg-dark ms-1">Active</span>
                            @endif
                        </div>

                        <div class="d-flex flex-wrap gap-2">
                            <a href="{{ route('stocks.index') }}" class="btn btn-sm btn-outline-secondary" style="border-radius:10px;">
                                <i class="fa fa-rotate-left me-1"></i> Reset
                            </a>
                            <button type="submit" class="btn btn-sm btn-primary" style="border-radius:10px;">
                                <i class="fa fa-search me-1"></i> Apply
                            </button>
                        </div>
                    </div>

                    <div class="row g-2">
                        {{-- Search --}}
                        <div class="col-lg-4">
                            <label class="small text-muted mb-1">Search (Category/Sub/Warehouse)</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white"><i class="fa fa-magnifying-glass"></i></span>
                                <input type="text" name="q" value="{{ request('q') }}" class="form-control" placeholder="Search...">
                            </div>
                        </div>

                        {{-- Category --}}
                        <div class="col-lg-2 col-md-4">
                            <label class="small text-muted mb-1">Category</label>
                            <select name="cat_id" id="cat_id" class="form-control select2" style="width:100%;">
                                <option value="">All</option>
                                @foreach($category as $c)
                                    <option value="{{ $c->id }}" @selected(request('cat_id') == $c->id)>
                                        {{ $c->title_ps ?? $c->title_en }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Sub Category --}}
                        <div class="col-lg-2 col-md-4">
                            <label class="small text-muted mb-1">Sub Category</label>
                            <select name="sub_cat_id" id="sub_cat_id" class="form-control select2" style="width:100%;">
                                <option value="">All</option>
                                @foreach($sub_category as $sc)
                                    <option value="{{ $sc->id }}" @selected(request('sub_cat_id') == $sc->id)>
                                        {{ $sc->title_ps ?? $sc->title_en }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Unit --}}
                        <div class="col-lg-2 col-md-4">
                            <label class="small text-muted mb-1">Unit</label>
                            <select name="unit_id" class="form-control select2" style="width:100%;">
                                <option value="">All</option>
                                @foreach($units as $u)
                                    <option value="{{ $u->id }}" @selected(request('unit_id') == $u->id)>
                                        {{ $u->title_ps ?? $u->title_en }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Weight --}}
                        <div class="col-lg-2 col-md-4">
                            <label class="small text-muted mb-1">Weight</label>
                            <select name="weight_id" class="form-control select2" style="width:100%;">
                                <option value="">All</option>
                                @foreach($weights as $w)
                                    <option value="{{ $w->id }}" @selected(request('weight_id') == $w->id)>
                                        {{ $w->title_ps ?? $w->title_en }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Warehouse --}}
                        <div class="col-lg-3 col-md-6">
                            <label class="small text-muted mb-1">Warehouse</label>
                            <select name="location_id" class="form-control select2" style="width:100%;">
                                <option value="">All</option>
                                @foreach($location as $loc)
                                    <option value="{{ $loc->id }}" @selected(request('location_id') == $loc->id)>
                                        {{ $loc->name_ps ?? $loc->name_en }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Low stock --}}
                        <div class="col-lg-2 col-md-6 d-flex align-items-end">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="1" name="low" id="low" @checked(request('low') == 1)>
                                <label class="form-check-label" for="low">Low stock only</label>
                            </div>
                        </div>

                        {{-- Per page --}}
                        <div class="col-lg-2 col-md-4">
                            <label class="small text-muted mb-1">Per Page</label>
                            <select name="per_page" class="form-control" style="border-radius:10px;">
                                @foreach([10,20,50,100] as $pp)
                                    <option value="{{ $pp }}" @selected((int)request('per_page',10) === $pp)>{{ $pp }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Sort --}}
                        <div class="col-lg-3 col-md-4">
                            <label class="small text-muted mb-1">Sort</label>
                            <div class="d-flex gap-2">
                                <select name="sort" class="form-control" style="border-radius:10px;">
                                    <option value="id"  @selected(request('sort','id')=='id')>Newest</option>
                                    <option value="qty" @selected(request('sort')=='qty')>Qty</option>
                                    <option value="cpi" @selected(request('sort')=='cpi')>CPI</option>
                                    <option value="spi" @selected(request('sort')=='spi')>SPI</option>
                                    <option value="date" @selected(request('sort')=='date')>Date</option>
                                </select>
                                <select name="dir" class="form-control" style="border-radius:10px; max-width:120px;">
                                    <option value="desc" @selected(request('dir','desc')=='desc')>DESC</option>
                                    <option value="asc"  @selected(request('dir')=='asc')>ASC</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    {{-- Active chips --}}
                    @if(request()->hasAny(['q','cat_id','sub_cat_id','unit_id','weight_id','location_id','low']))
                        <div class="mt-2 d-flex flex-wrap gap-2">
                            @if(request('q')) <span class="badge bg-white text-dark border">Q: {{ request('q') }}</span> @endif
                            @if(request('cat_id')) <span class="badge bg-white text-dark border">Category</span> @endif
                            @if(request('sub_cat_id')) <span class="badge bg-white text-dark border">Sub</span> @endif
                            @if(request('unit_id')) <span class="badge bg-white text-dark border">Unit</span> @endif
                            @if(request('weight_id')) <span class="badge bg-white text-dark border">Weight</span> @endif
                            @if(request('location_id')) <span class="badge bg-white text-dark border">Warehouse</span> @endif
                            @if(request('low')==1) <span class="badge bg-danger">LOW Only</span> @endif
                        </div>
                    @endif
                </form>
            </div>

            {{-- Table --}}
            <div class="table-responsive mt-3">
                <table class="table table-hover align-middle">
                    <thead class="bg-light">
                        <tr>
                            <th style="width:60px;">#</th>
                            <th>SKU</th>
                            <th>Category</th>
                            <th>Sub</th>
                            <th>Unit</th>
                            <th>Weight</th>
                            <th>Warehouse</th>
                            <th class="text-end">QTY</th>
                            <th class="text-end">CPI</th>
                            <th class="text-end">SPI</th>
                            <th style="width:160px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($stock as $row)
                            @php
                                $min = $row->min_qty ?? 5;
                                $isLow = ($row->qty <= $min);
                            @endphp
                            <tr>
                                <td class="fw-bold">{{ $loop->iteration }}</td>
                                <td>
                                    <span class="badge bg-dark">{{ $row->sku ?? ('STK-'.$row->id) }}</span>
                                    @if($isLow)
                                        <span class="badge bg-danger ms-1">LOW</span>
                                    @endif
                                </td>
                                <td>{{ $row->category->title_ps ?? $row->category->title_en ?? '-' }}</td>
                                <td>{{ $row->subcategory->title_ps ?? $row->subcategory->title_en ?? '-' }}</td>
                                <td>{{ $row->unit->title_ps ?? $row->unit->title_en ?? '-' }}</td>
                                <td><span class="badge bg-success">{{ $row->weight->title_ps ?? $row->weight->title_en ?? '-' }}</span></td>
                                <td>{{ $row->location->name_ps ?? $row->location->name_en ?? '-' }}</td>
                                <td class="text-end fw-bold">{{ number_format((float)$row->qty,2) }}</td>
                                <td class="text-end">{{ number_format((float)$row->cpi,2) }}</td>
                                <td class="text-end">{{ number_format((float)$row->spi,2) }}</td>
                                <td>
                                    <a href="{{ route('stocks.edit',$row->id) }}" class="btn btn-sm btn-outline-success" style="border-radius:10px;" title="Edit">
                                        <i class="fa fa-pen"></i>
                                    </a>

                                    {{-- Your existing route name --}}
                                    <a href="{{ route('stock.generate_barcode',$row->id) }}" class="btn btn-sm btn-outline-info" style="border-radius:10px;" title="Barcode">
                                        <i class="fa fa-qrcode"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="11" class="text-center text-muted py-4">No Data</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-3">
                {{ $stock->links('pagination::bootstrap-4') }}
            </div>
        </div>
    </div>
</main>
@endsection

@section('pageJs')
<script>
    $(".app-menu").removeClass("active");
    $("#nav_stocki").addClass("active");
    $("#stocki").addClass("is-expanded");

    // Category -> SubCategory (your route returns <option> list)
    $(document).on('change', '#cat_id', function() {
        let cat = $(this).val();
        $("#sub_cat_id").html(`<option value="">All</option>`).trigger('change');
        if(!cat) return;

        $.ajax({
            url: '{{ route('category.get') }}',
            type: 'GET',
            data: { 'p_category': cat },
            success: function(data) {
                $("#sub_cat_id").append(data).trigger('change');
            },
            error: function() {
                swal("Warning", "Error occured!", "error");
            },
        });
    });
</script>
@endsection