@extends('admin.layout')
@section('title', 'Service Request History')
@section('header')
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">

@endsection
@section('content')

<style>
    .badge-accepted {
    background-color: green;
    color: white;
    padding: 5px;
}

.badge-declined {
    background-color: red;
    color: white;
    padding: 5px;
}

.badge-pending {
    background-color: gray;
    color: white;
    padding: 5px;
}

</style>


    <div class="container-fluid page-wrapper">


        <div class="row">
            <div class="">
                <h3 class="page-top-heading">Service Request History</h3>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-lg-12">
                <div class="card datatable-card">
                    <div class="card-body">
                        <table id="data-table" class="table nowrap align-middle" style="width:100%">
                            <thead>
                                <tr>
                                    <th>SN</th>
                                    <th>DATE</th>
                                    <th>NAME</th>
                                    <th>PHONE NO</th>
                                    <th>REQUEST DATE</th>
                                    <th>CATEGORY</th>
                                    <th>SUB-CATEGORY</th>
                                    <th>USER ID</th>
                                    <th>BUSINESS NAME</th>
                                    <th>REMARK</th>
                                    <th>STATUS</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($business as $key => $item)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ \Carbon\Carbon::parse($item->created_at)->format('m/d/Y') }}</td>
                                        <td>{{ $item->name }}</td>
                                        <td>{{ $item->phone_number }}</td> 
                                        <td>{{ \Carbon\Carbon::parse($item->created_at)->format('m/d/Y') }}</td>
                                        <td>{{ $item->category_name }}</td>
                                        <td>{{ $item->subcategory_name ?? 'N/A' }}</td> 
                                        <td>{{ $item->userid }}</td>
                                        <td>{{ $item->business_name }}</td>
                                        <td>{{ $item->remark }}</td>
                                        <td>
                                            @if($item->status == 'accepted')
                                                <span class="badge bg-success">Accepted</span>
                                            @elseif($item->status == 'declined')
                                                <span class="badge bg-danger">Declined</span>
                                            @else
                                                <span class="badge bg-secondary">Pending</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        

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






    </div>
    <!-- end container fluid -->




@endsection
@section('footer')


    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    <!-- Datatable JS -->
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/datatables.init.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jszip.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js"></script>
    <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js"></script>



@endsection