@extends('default.master')

@section('title', 'Clients')

@section('main')
    @include('default.navbar')
    <div class="container-fluid p-5 mt-5">
        <!-- SEARCH BAR -->
        <div class="card p-2 mb-3">
            <form method="post" action="{{ route('client.search') }}">
                @csrf

                @if(session()->exists('keyword-client'))
                    <input type="hidden" name="set-search" value="false"/>
                @else
                    <input type="hidden" name="set-search" value="true"/>
                @endif
                <div class="input-group">
                    <input type="text" name="keyword" class="form-control"
                           @if(session()->exists('keyword-client')) value="{{ session('keyword-client') }}" disabled
                           @endif placeholder="nom du client" required/>
                    @if(session()->exists('keyword-client'))
                        <button type="submit" class="btn btn-danger" id="button-addon2"><i
                                    class="fa-solid fa-xmark"></i></button>
                    @else
                        <button type="submit" class="btn btn-primary" id="button-addon2"><i class="fas fa-search"></i>
                        </button>
                    @endif
                </div>
            </form>
            <div class="row mt-2 d-flex justify-content-between">
                {{ $clients->links() }}
                <div class="col-auto">
                    <a data-bs-toggle="modal" href="#addClient" role="button" class="btn btn-success">
                        <i class="fa-solid fa-plus"></i> client
                    </a>
                </div>

            </div>
        </div>

        <div class="row">
            @forelse($clients as $client)
                <div class="col-lg-3 col-md-6 col-sm-12 mb-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">{{ $client->name }}</h5>
                            <p class="card-text">
                                {{ ucfirst($client->address) }}
                            </p>
                            <div class="d-flex mb-0 pb-0">
                                <form method="get" action="{{ route('client.show', ['id' => $client->id]) }}">
                                    <button type="submit" class="btn btn-primary me-2" role="button">
                                        <i class="fa-solid fa-eye"></i>
                                    </button>
                                </form>
                                <form method="post" action="{{route('client.delete', ['client_id' => $client->id])}}">
                                    @csrf
                                    <button type="submit" class="btn btn-danger me-2" role="button">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </form>
                                <!--<form method="get" action="/">
                                    <button type="submit" class="btn btn-success" role="button">
                                        <i class="fa-solid fa-plus"></i>
                                        <i class="fa-solid fa-file"></i>
                                    </button>
                                </form>-->
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-lg-3 col-md-6 col-sm-12 mb-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Aucun client</h5>
                            <p class="card-text">
                                aucun client en bdd
                            </p>
                        </div>
                    </div>
                </div>
            @endforelse
        </div>
    </div>

    <!-- Add Service Modal -->
    <div class="modal fade" id="addClient" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
         aria-labelledby="addClientLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form class="modal-content" method="post" action="{{route('client.store')}}">
                @csrf
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="addClientLabel">Ajouter un client</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control" id="nameClient" name="name" placeholder="Nom du client">
                        <label for="nameClient">Nom du client</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control" id="addressClient" name="address"
                               placeholder="Adresse du client">
                        <label for="addressClient">Adresse du client</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control" id="emailClient" name="email"
                               placeholder="Adresse email">
                        <label for="emailClient">Adresse email</label>
                    </div>
                    <div class="form-floating mb-3" id="siretContainer" style="display: none">
                        <input type="number" class="form-control" id="siretClient" name="siret" placeholder="SIRET">
                        <label for="siretClient">SIRET</label>
                    </div>
                    <div class="form-floating mb-3" id="tvaContainer" style="display: none">
                        <input type="text" class="form-control" id="tvaClient" name="tva" placeholder="Numéro TVA">
                        <label for="tvaClient">Numéro TVA</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value=1 id="proClient" name="professional"
                               onChange="proOrNot()">
                        <label class="form-check-label" for="proClient">
                            Client professionnel
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">annuler</button>
                    <button type="submit" class="btn btn-primary">ajouter</button>
                </div>
            </form>
        </div>
    </div>

    @include('default.action-menu')

    <script>
        function proOrNot() {
            document.querySelector('#siretContainer').style.display =
                (document.querySelector('#proClient').checked) ? 'block' : 'none';
            document.querySelector('#tvaContainer').style.display =
                document.querySelector('#siretContainer').style.display;
        }
    </script>
@endsection