@extends('layouts.main-layout')

@section('title')
    Sow App - Check Client Requirements
@endsection

@section('content')

<x-navigation />

<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-12">

            <x-error-success-messages />

            <ul class="nav nav-tabs mb-5 justify-content-between">
                <li class="nav-item">
                    <a class="nav-link active active-clients" aria-current="page" href="#">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active-clients history" href="#">History</a>
                </li>
            </ul>

            <div class="activeCheck">
                <h2 class="text-center">Active Requirements</h2>
                <table id="checkClients" class="table table-hover border rounded-1">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Email</th>
                            <th scope="col">Phone Number</th>
                            <th scope="col">Created at</th>
                            <th scope="col">Updated at</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($client_requirements as $client)
                            @if($client->client_requirement_is_active && $client->client->client_referral_id == session()->get('client_id'))
                                <tr>
                                    <th scope="row">{{ $client->client_requirement_id }}</th>
                                    <td>{{ $client->client->client_firstName }}</td>
                                    <td>{{ $client->client->client_lastName }}</td>
                                    <td>{{ $client->client->client_email }}</td>
                                    <td>{{ $client->client->client_phoneNumber }}</td>
                                    <td>{{ $client->client_requirement_created_at }}</td>
                                    <td>{{ $client->client_requirement_updated_at }}</td>
                                    <td><button class="btn btn-primary"><a href="{{ url('/clientCheck/'. $client->client_requirement_id .'') }}" class="text-white text-decoration-none text-uppercase">Check</a></button></td>
                                </tr>
                            @endif
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="historyCheck d-none">
                <h2 class="text-center">History Requirements</h2>
                <table id="historyClients" class="table table-hover border rounded-1">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">First</th>
                            <th scope="col">Last</th>
                            <th scope="col">Email</th>
                            <th scope="col">Phone Number</th>
                            <th scope="col">Created at</th>
                            <th scope="col">Updated at</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($client_requirements as $client)
                            @if(!$client->client_requirement_is_active && $client->client->client_referral_id == session()->get('client_id'))
                                <tr>
                                    <th scope="row">{{ $client->client_requirement_id }}</th>
                                    <td>{{ $client->client->client_firstName }}</td>
                                    <td>{{ $client->client->client_lastName }}</td>
                                    <td>{{ $client->client->client_email }}</td>
                                    <td>{{ $client->client->client_phoneNumber }}</td>
                                    <td>{{ $client->client_requirement_created_at }}</td>
                                    <td>{{ $client->client_requirement_updated_at }}</td>
                                    <td><button class="btn btn-primary"><a href="{{ url('/clientCheck/'. $client->client_requirement_id .'') }}" class="text-white text-decoration-none text-uppercase">Check</a></button></td>
                                </tr>
                            @endif
                        @endforeach
                    </tbody>
                </table>
            </div>

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

<script type="text/javascript">
    $(document).ready(function(){
        $('#checkClients').DataTable();

        $('.active-clients').click(function(){
            $('.active-clients').removeClass('active');
            $(this).addClass('active');

            if($(this).hasClass("history")){
                $("#checkClients").DataTable().destroy();
                $(".activeCheck").addClass("d-none");

                $(".historyCheck").removeClass("d-none");
                $("#historyClients").DataTable();
            }else{
                $(".historyCheck").addClass("d-none");
                $("#historyClients").DataTable().destroy();

                $("#checkClients").DataTable();
                $(".activeCheck").removeClass("d-none");
            }
        });
    });
</script>

@endsection