@extends('layouts.app')

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

@push('styles')
<link href="{{ asset('css/crudTableStyler.css') }}" rel="stylesheet" type="text/css">
@endpush

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

        <div class="d-flex flex-row justify-content-between px-4 pb-2 pt-3">

            <div class="d-flex flex-row form-group w-50">
                <input type="text" class="form-control" placeholder="Search client...">
                </input>
                <div class="py-2 px-3 bg-transparent"><i class="bi bi-search"></i></div>
            </div>

        </div>


        <div class="table-responsive mh-60-vh overflow-y-scroll">
            <table class="table bg-transparent table-hover">
                <thead class="thead sticky-top">
                    <tr>

                        <th class="column-Name fw-normal text-secondary">NAME</th>
                        <th class="column-Email fw-normal text-secondary">PRIMARY LOCATION</th>
                        <th class="column-Role fw-normal text-secondary">DATA</th>
                        <th class="w-25 text-center fw-normal text-secondary">ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($clients as $client)
                        <tr class="align-middle">

                            <td class="w-25 h-100 firstColumn">{{ $client->client_name ?? $client->name }}</td>
                            <td class="w-25 h-100">{{ $client->primaryLocation->address }}</td>
                            <td class="w-25 h-100">{{ $client->primaryDataFile->filename }}</td>
                            <td class="w-25 h-100 d-flex justify-content-end column-Actions lastColumn">
                                <button class="btn btn-xs bg-transparent fw-bold" data-bs-toggle="modal" data-bs-target="#showClientModal-{{ $client->id }}">
                                    <a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">
                                        <i class="bi-eye-fill"></i> {{ __('Show') }}
                                    </a>
                                </button>
                                <button class="btn btn-xs bg-transparent fw-bold" data-bs-toggle="modal" data-bs-target="#toggleBanClientModal-{{ $client->id }}">
                                    <a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">
                                        <i class="bi-person-check-fill"></i> {{ __('Unban') }}
                                    </a>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </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 d-flex flex-column justify-content-center align-items-center">
                <p class="p-0 m-0">{{ $message }}</p>
            </div>
        @endif

        @if($errors->any())
        {{-- @php
            dd($errors->all());
        @endphp --}}
        <div class="alert alert-danger d-flex flex-column justify-content-center align-items-center">
            @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

    @foreach($clients as $client)
        @include('superadmin.client.modal-show', ['client' => $client])
        @include('superadmin.client.modal-toggle-ban', ['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 BANNED CLIENTS

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

        setModalFormEventListeners(toggleBanButtons, toggleBanForms, "data-client-id");
        setModalFormEventListeners(deleteButtons, deleteForms, "data-client-id");
    </script>
@endsection