@extends('layouts.app')

@section('title', 'Manage Data Log')

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

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

    <div class="d-flex flex-row justify-content-between pb-2 pt-3">
        <form method="get" action="{{ route('dataLog.index') }}" class="justify-content-between pb-2 pt-3 w-100">
            <div class="input-group w-25">
                <input type="text" class="form-control" name="ageFrom" placeholder="Age From" value="{{ request()->ageFrom }}">
                <input type="text" class="form-control" name="ageTo" placeholder="Age To" value="{{ request()->ageTo }}">
            </div>
            <div class="input-group w-25">
                <select class="form-select" id="gender" aria-label="Select Gender" name="gender">
                    <option selected disabled>Gender</option>
                    @foreach($genders as $gender)
                    <option value="{{ $gender['id'] }}">{{ $gender['name'] }}</option>
                    @endforeach
                </select>
            </div>
            <div class="input-group w-25">
                <!-- <input type="text" class="form-control" name="dateFrom" placeholder="Date From" value="{{ request()->dateFrom }}">
                <input type="text" class="form-control" name="dateTo" placeholder="Date To" value="{{ request()->dateTo }}"> -->
                <div class="input-group-append">
                    <button type="submit" class="input-group-text bg-transparent"><i class="bi bi-search"></i></button>
                </div>
            </div>
        </form>

    </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">DATE</th>
                    <th class="fw-semibold text-secondary">GENDER</th>
                    <th class="fw-semibold text-secondary">AGE</th>
                    <th class="fw-semibold text-secondary">FILE</th>
                    @if(auth()->user()->is_admin)
                    <th class="text-secondary">CLIENT NAME</th>
                    <th class="text-secondary">COMPANY</th>
                    @endif
                    <th class="fw-semibold text-secondary text-center">ACTION</th>
                </tr>
            </thead>
            <tbody>
                @if($dataLogs->count())
                @foreach ($dataLogs as $dataLog)
                <tr class="align-middle" data-dataLog-date_time="{{ $dataLog->date_time ?? "" }}" data-dataLog-gender="{{ $dataLog->gender ?? "" }}" data-dataLog-age="{{ $dataLog->age ?? "" }}">

                    <td class="rounded-left">{{ $dataLog->date_time }}</td>
                    <td class="">{{ $dataLog->gender }}</td>
                    <td class="">{{ $dataLog->age }}</td>
                    <td class="">{{ $dataLog->dataFile->filename }}</td>
                    @if(auth()->user()->is_admin)
                    <td>{{ $dataLog->dataFile->client->first_name.' '.$dataLog->dataFile->client->last_name }}</td>
                    <td>{{ @$dataLog->dataFile->client->company }}</td>
                    @endif
                    <td class="rounded-right text-center">
                        <button title="Remove Data Log" class="btn btn-xs bg-transparent fw-bold" data-bs-toggle="modal" data-bs-target="#deleteDataLogModal-{{ $dataLog->id }}">
                            <a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">
                                <i class="bi bi-trash-fill"></i>
                            </a>
                        </button>
                    </td>
                </tr>
                @endforeach
                @else
                <tr>
                    <td colspan="{{ (auth()->user()->is_admin)?'7':'5' }}" class="text-center fw-bold" style="vertical-align:middle;">No data log found.</td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>

    {!! $dataLogs->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 data log:</strong> {{ $error }}</p>
        @endforeach
    </div>
    @endif
</div>
@endif


@foreach($dataLogs as $dataLog)
@include('client.dataLog.modal-delete', ['dataLog' => $dataLog])
@endforeach

{{-- <style src="{{ asset('css/crudTableStyler.css') }}"></style> --}}
<style>
    .input-group.w-25 {
        float: left;
    }
</style>

<script src="{{ asset('js/modalCrudForms.js') }}"></script>
<script>
    let deleteButtons = document.querySelectorAll('.deleteDataLogButton');
    let deleteForms = document.querySelectorAll('.deleteDataLogForm');

    setModalFormEventListeners(deleteButtons, deleteForms, "data-dataLog-id");

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

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

    }, 2500);
</script>

@endsection