@extends('layouts.app')

@section('title', 'Manage Clients')

@push('styles')
@vite(['resources/css/crudTableStyler.css'])
@endpush

@section('content')
    <div class="container-fluid p-4">
        <h1 class="fs-2">Admin | <strong>Manage Clients</strong></h1>

        <div class="d-flex flex-row justify-content-between pb-2 pt-3">
            <form method="get" action="{{ route('clients.index') }}" class="justify-content-between pb-2 pt-3 w-25">
                <div class="input-group">
                    <input type="text" class="form-control" name="search" placeholder="Search client..." value="{{ request()->search }}">
                    <div class="input-group-append">
                        <button type="submit" class="input-group-text bg-transparent"><i class="bi bi-search"></i></button>
                    </div>
                </div>
            </form>

            <p>
                <button id="buttonTriggerNewClientModal" class="rounded-3 btn btn-primary btn-sm float-right align-middle"  data-placement="left" data-bs-toggle="modal" data-bs-target="#createClientModal">
                    <i class='bx bx-plus-circle'></i>
                    {{ __('Create New') }}
                </button>
            </p>

        </div>

        <div class="table-responsive mh-60-vh overflow-y-scroll">
            <table class="table bg-transparent table-hover">
                <thead class="thead sticky-top bg-app">
                    <tr>
                        <th class="fw-semibold text-secondary">FIRST NAME</th>
                        <th class="fw-semibold text-secondary">LAST NAME</th>
                        <th class="fw-semibold text-secondary">COMPANY</th>
                        <th class="fw-semibold text-secondary">EMAIL</th>
                        <th class="fw-semibold text-secondary">CREATED</th>
                        <th class="fw-semibold text-secondary text-center">ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    @if($clients->count())
                        @foreach ($clients as $client)
                            <tr class="align-middle"
                                data-client-first_name="{{ $client->first_name ?? "" }}"
                                data-client-last_name="{{ $client->last_name ?? "" }}"
                                data-client-company="{{ $client->company ?? "" }}"
                                data-client-email="{{ $client->email ?? "" }}"
                                data-client-location="{{ $client->primaryLocation->address ?? "" }}"
                            >

                                <td class="rounded-left">{{ $client->first_name }}</td>
                                <td class="">{{ $client->last_name }}</td>
                                <td class="">{{ $client->company }}</td>
                                <td class="">{{ $client->email }}</td>
                                <td class="">{{ $client->created_at->format('m/d/Y H:i') }}</td>
                                <td class="rounded-right text-center">
                                    <button class="btn btn-xs bg-transparent fw-bold" data-bs-toggle="modal" data-bs-target="#editClientModal-{{ $client->id }}">
                                        <a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover" title="Edit client">
                                            <i class="bi-pencil-square"></i>
                                        </a>
                                    </button>
                                    <button class="btn btn-xs bg-transparent fw-bold" data-bs-toggle="modal" data-bs-target="#deleteClientModal-{{ $client->id }}">
                                        <a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover" title="Delete client">
                                            <i class="bi-trash"></i>
                                        </a>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    @else
                    <tr>
                        <td colspan="6" class="text-center fw-bold" style="vertical-align:middle;">No clients found.</td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>

        {!! $clients->links() !!}

    </div>

    @if($message = Session::get('success') || $message = Session::get('warning') || $errors->any())
    <div class="d-flex flex-row w-100 justify-content-center">
        @if ($message = Session::get('success'))
            <div class="alert alert-success fade show" role="alert">
                {{ $message }}
            </div>
        @endif

        @if($errors->any())
        {{-- @php
            dd($errors->all());
        @endphp --}}
        <div class="alert alert-danger fade show">
            @foreach($errors->all() as $error)
            <p class="text-center m-0 p-0"><strong class="fst-italic">Could not update client:</strong> {{ $error }}</p>
            @endforeach
        </div>
        @endif
    </div>
    @endif

    @include('admin.client.modal-create')

    @foreach($clients as $client)
        @include('admin.client.modal-show', ['client' => $client])
        @include('admin.client.modal-edit', ['client' => $client])
        @include('admin.client.modal-delete', ['client' => $client])
    @endforeach

    {{-- <style src="{{ asset('css/crudTableStyler.css') }}"></style> --}}
    <style>
        .column-Name,
        .column-Email,
        .column-ClientName,
        .column-Gender,
        .column-Role,
        .column-Actions
            { height: 100%; }
        .column-Name,
        .column-Email,
        .column-ClientName
            { width: 18%; }
        .column-Gender
            { width: 10%; }
        .column-Role {
            width: 10%;
            text-align: center;
        }
        .column-Actions {
            /* width: 25%; */
        }
    </style>

    <script src="{{ asset('js/modalCrudForms.js') }}"></script>
    <script>
    'use strict';

    // CRUD CLIENTS

        let createButton = document.querySelector('#createClientButton');
        let createForm = document.querySelector('#createClientForm');

        let updateButtons = document.querySelectorAll('.updateClientButton');
        let updateForms = document.querySelectorAll('.updateClientForm');

        let deleteButtons = document.querySelectorAll('.deleteClientButton');
        let deleteForms = document.querySelectorAll('.deleteClientForm');

        let toggleBanButtons = document.querySelectorAll('.toggleBanClientButton');
        let toggleBanForms = document.querySelectorAll('.toggleBanClientForm');

        setModalFormEventListeners(updateButtons, updateForms, "data-client-id");
        setModalFormEventListeners(deleteButtons, deleteForms, "data-client-id");
        setModalFormEventListeners(toggleBanButtons, toggleBanForms, "data-client-id");
        setSingleModalFormEventListener(createButton, createForm);

        setTimeout(function(){
            const alerts = Array.from(document.getElementsByClassName('alert'));

            alerts.forEach(alert => {
                alert.remove();
            });

        }, 3500);
    </script>
@endsection