@extends('layouts.main-layout')

@section('title')
    {{ config('app.name') }} - Edit Client Requirement
@endsection

@section('content')

<div class="content-wrap">
    <div class="main">
        <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">Website</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)
                                        <tr>
                                            <th scope="row">{{ $client->client_requirement_id }}</th>
                                            <td>{{ $client->client_requirement_site }}</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">Website</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)
                                        <tr>
                                            <th scope="row">{{ $client->client_requirement_id }}</th>
                                            <td>{{ $client->client_requirement_site }}</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>
    </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