@extends('dashboard_layouts.app')
@section('content')
<div id="content-wrapper" class="d-flex flex-column">

    <!-- Main Content -->
    <div id="content">

        <!-- Topbar -->
        @include('dashboard_layouts.navbar')
        <!-- End of Topbar -->

        <!-- Begin Page Content -->
        <div class="container-fluid">

            <!-- DataTales  -->
    <div class="card shadow mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        @if($location == 'Location A')
            <h6 class="m-0 font-weight-bold text-primary">MLB 2026 Station A Active Orders</h6>
        @elseif($location == 'Location B')
            <h6 class="m-0 font-weight-bold text-primary">MLB 2026 Station B Active Orders</h6>
        @elseif($location == 'Location C')
            <h6 class="m-0 font-weight-bold text-primary">MLB 2026 Station C Active Orders</h6>
        @elseif($location == 'Location D')
            <h6 class="m-0 font-weight-bold text-primary">MLB 2026 Station D Active Orders</h6>
        @endif
       <form method="GET" action="{{ route('getMLBActiveOrders') }}" class="form-inline">
    
    <input type="hidden" name="location" value="{{ $location }}">

    <div class="input-group">
        <input type="text" name="search" class="form-control" 
               placeholder="Search by name or ID" 
               value="{{ request('search') }}">
        <div class="input-group-append">
            <button class="btn btn-primary" type="submit">
                <i class="fas fa-search"></i>
            </button>

            @if(request('search'))
            <a href="{{ route('getMLBActiveOrders', ['location' => $location]) }}" class="btn btn-outline-secondary ml-2">
                Clear
            </a>
            @endif
        </div>
    </div>
</form>
    </div>
                <div class="card-body">
                    <table class="table">
                        <thead>
                          <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Name</th>
                            <th scope="col">Text</th>
                            <th scope="col">Status</th>
                            <th scope="col">Update</th>
                          </tr>
                        </thead>
                        <tbody>
                            @foreach ($mlb as $data)     
                            <tr>
                                <td scope="row">{{ $data->id }}</td>
                                <td scope="row">{{ $data->name }}</td>
                                <th scope="row">{{ $data->text }}</th>
                                <td>
                                    @if($data->status == 1)
                                    <span class="badge badge-success">Complete</span>
                                    @else
                                    <span class="badge badge-danger">Pending</span>
                                    @endif
                                </td>
                                <td>
                                    @if($data->status == 1)
                                        <a href="{{ route('updateMLBOrderStatus',['mlb'=>$data->id]) }}" style="pointer-events: none" class="text-muted">Mark as Complete</a>
                                    @else
                                        <a href="{{ route('updateMLBOrderStatus',['mlb'=>$data->id]) }}">Mark as Complete</a>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                      </table>
                      <div class="float-right">
                          {{ $mlb->appends(['location' => $location, 'search' => request('search')])->links() }}
                      </div>
                </div>
            </div>
        </div> 
        <!-- /.container-fluid -->

    </div>
    <!-- End of Main Content -->

    <!-- Footer -->
    <footer class="sticky-footer bg-white">
        <div class="container my-auto">
            <div class="copyright text-center my-auto">
                <span>Copyright &copy; Your MLB 2026</span>
            </div>
        </div>
    </footer>
    <!-- End of Footer -->

    <script src="https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
     
    <script>
$(document).ready(function () {
    setTimeout(function () {
        $.ajax({
            type: 'GET',
            url: '/getMLBActiveOrders',
            data: {
                location: "{{ $location }}",
                search: "{{ request('search') }}"
            },
            success: function(data) {
                location.reload(true);
            }
        });
    }, 100000);
});
</script>
</div>
@endsection