@extends('layout.layout')
@section('footwear-request','active')
@section('content')

<!-- Main content -->
<section class="content">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2 mt-3">
                <div class="col-sm-12 pl-3 pr-3">
                    <h1 class="text-ultra"><a href="javascript:history.back()" id="arrow-right"><i class="fas fa-angle-left mr-2"></i></a> Footwear Request</h1>
                    
                    @include('partials.search-table')

                </div>
            </div>
            <div class="card card-row mt-3 pl-2 pr-2">
                <div class="card-header pl-0">
                    <h3 class="card-title mt-1 text-medium">
                        <b style="font-family: 'Gotham-Medium';">Footwear Request Status</b>
                    </h3>
                    <div class="card-tools" style="margin-right: -1.1rem;">
                        <button id="refresh-page" class="btn btn-sm btn-outline-secondary" title="Refresh Page" style="color:#b2b2b2">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    @forelse ($footwearRequests as $request)
                        @php
                            $statusColors = [
                                'pending' => '#b2b2b2',
                                'picking' => '#FEDD00',
                                'ready' => '#28a745',
                                'not_available' => '#dc3545'
                            ];
                            $borderColor = $statusColors[$request->status];
                        @endphp
                        <div class="card card-outline mb-3 shadow-sm" style="border-left: 5px solid {{ $borderColor }}">
                            <div class="card-header kanban-item">
                                <div class="card-tools"style="font-family: 'Gotham-Book';">
                                    @if ($request->status == 'pending')
                                        <span class="badge badge-primary">Pending</span>
                                    @elseif ($request->status == 'picking')
                                        <span class="badge badge-secondary">Picking</span>
                                    @elseif ($request->status == 'ready')
                                        <span class="badge badge-success">Ready</span>
                                    @else
                                        <span class="badge badge-danger">Not Available</span>
                                    @endif
                                </div>
                                <h6 class="text-medium" style="font-family: 'Gotham-Book';">{{ $request->product_name }}</h6>
                                <ul class="list-unstyled mb-2"style="font-family: 'Gotham-Book';">
                                    <li>Size: {{ $request->size }}</li>
                                    <li>Article: {{ $request->product_article }}</li>
                                    <li>UPC: {{ $request->upc }}</li>
                                    <li class="text-muted">Associate: {{ $request->employee_name }}</li>
                                <ul>
                                <div class="card-tools delete-button mr-2">
                                    <button type="button" class="btn btn-tool text-danger" onclick="deleteFootwearRequest('{{ $request->fw_req_id }}')">
                                        <i class="fas fa-trash fa-2x"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted p-3">
                            No footwear requests found.
                        </div>
                    @endforelse
                </div>
            </div>

        </div>
    </section>

    

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

@endsection

@section('javascript')
    <script src="{{asset('js/footwear-request.js')}}"></script>
    <script src="{{asset('js/search.js')}}"></script>
@endsection