@include('dashboard.header')

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper mt-5">

    <section class="content">

        <div class="container-fluid">
            <div class="row">
                <div class="col-12 fullscreen-scroll">

                    <div class="kanban-column">
                        @forelse($footwearRequests as $request)
                        @php
                            $statusRaw = strtolower($request->status ?? 'N/A');

                            $statusMap = [
                                'pending' => ['label' => 'PENDING', 'style' => 'background-color: #b2b2b2; color: #000;', 'percent' => 25, 'color' => 'bg-secondary'],
                                'picking' => ['label' => 'PICKING', 'style' => 'background-color: #FEDD00; color: #000;', 'percent' => 60, 'color' => 'bg-warning'],
                                'ready' => ['label' => 'READY', 'style' => 'background-color: #28a745; color: #000;', 'percent' => 100, 'color' => 'bg-success'],
                                'not_available' => ['label' => 'NOT AVAILABLE', 'style' => 'background-color: #dc3545; color: #000;', 'percent' => 100, 'color' => 'bg-danger'],
                            ];

                            $statusData = $statusMap[$statusRaw];
                            $collapseId = 'collapse-' . $request->fw_req_id;
                        @endphp

                        <div class="card mb-1 rounded-lg shadow-sm d-flex flex-column flex-md-row fw-card" data-id="{{ $request->fw_req_id }}" 
                            style="cursor:pointer;" 
                            @if (!in_array($statusRaw, ['ready', 'not_available']))
                                onclick="toggleCollapse('{{ $collapseId }}', this)"
                            @endif>

                            <div class="fw-status d-flex align-items-center justify-content-center text-center px-2 py-1 {{ $statusData['label'] == 'NOT AVAILABLE' ? 'not_avail' : '' }}"
                                style="min-width: 100px; {{ $statusData['style'] }} font-weight: bold; font-size: 0.75rem; white-space: nowrap;">
                                <span style="writing-mode: vertical-rl; transform: rotate(240deg);">{{ $statusData['label'] }}</span>
                            </div>

                            <div class="card-body p-0 d-flex flex-column w-100 position-relative">
                                {{-- Product Info --}}
                                <div class="d-flex align-items-center pl-2">
                                    <img 
                                    class="product-image mr-2" 
                                    src="{{ asset('product-images/' . ($request->product_image && trim($request->product_image) !== '' ? $request->product_image : 'JD-WHITE.png')) }}" 
                                    alt="Product Image" 
                                    style="width: 60px; height: auto;">
                                    <div class="flex-grow-1">
                                        <div class="text-medium font-weight-bold mt-1" style="font-size: 1rem;">
                                            {{ $request->brand_name ?? 'N/A' }} {{ strtoupper($request->product_name ?? 'N/A') }} - {{ strtoupper($request->subclass ?? 'N/A') }}
                                        </div>
                                        <div class="row">
                                            <div class="col-5">
                                                <div class="mb-1 nolink" style="font-size: 0.85rem; text-decoration: none; color: #fff;">
                                                    <strong>SAP Article:</strong> {{ $request->product_article ?? 'N/A' }}
                                                </div>
                                                <div class="mb-1 nolink" style="font-size: 0.85rem; text-decoration: none; color: #fff;">
                                                    <strong>UPC:</strong> {{ $request->upc ?? 'N/A' }}
                                                </div>
                                            </div>
                                            <div class="col-5">
                                                <div class="mb-1 nolink" style="font-size: 0.85rem; text-decoration: none; color: #fff;">
                                                    <strong>Style Code:</strong> {{ $request->style_id ?? 'N/A' }}
                                                </div>
                                                <div class="mb-1 nolink" style="font-size: 0.85rem; text-decoration: none; color: #fff;">
                                                    <strong>Size:</strong> {{ $request->size ?? 'N/A' }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Requester --}}
                                <div class="text-right mt-auto mb-1" style="min-width: 100px; position:absolute; right:10px;top:15px">
                                    <small class="text-muted"style="font-family: 'Gotham-Book';">Requester</small><br>
                                    <strong style="font-family: 'Gotham-Medium';">{{ $request->employee_name }}</strong>
                                </div>

                                {{-- Progress bar --}}
                                <div class="position-relative w-100">
                                    <div class="progress" style="height: 6px; border-radius: 0;">
                                        <div class="progress-bar {{ $statusData['color'] }}"
                                            role="progressbar"
                                            style="width: {{ $statusData['percent'] }}%;"
                                            aria-valuenow="{{ $statusData['percent'] }}"
                                            aria-valuemin="0"
                                            aria-valuemax="100">
                                        </div>
                                    </div>
                                </div>

                                {{-- Collapsible content, initially hidden --}}
                                <div id="{{ $collapseId }}" class="collapse-content mt-2" style="display:none; border-top:2px solid #d2d2d2; padding:10px 0px 5px 10px;">
                                    @if ($statusRaw === 'pending')
                                            <button class="btn btn-outline-warning mx-1 mb-1 text-white update-status-btn" data-status="picking" data-id="{{ $request->fw_req_id }}">Picking</button>
                                    @elseif ($statusRaw === 'picking')
                                            <button class="btn btn-outline-danger text-white mx-1 mb-1 update-status-btn" data-status="not_available" data-id="{{ $request->fw_req_id }}">Not Available</button>
                                            <button class="btn btn-outline-success mx-1 mb-1 text-white update-status-btn" data-status="ready" data-id="{{ $request->fw_req_id }}">Ready</button>
                                            <button class="btn btn-outline-primary text-white mx-1 mb-1 update-status-btn" data-status="pending" data-id="{{ $request->fw_req_id }}">Mark as pending to be picked later</button>
                                    @endif
                                </div>

                            </div>
                        </div>
                        @empty
                            <div class="kanban-empty text-center text-muted py-4">
                                <h5>No footwear requests available.</h5>
                            </div>
                        @endforelse
                    </div>

                </div>
            </div>
        </div>

    </section>
    
  </div>
  <!-- /.content-wrapper -->

@include('dashboard.script')