@extends('layouts.app')
@section('title', 'Client: Manage Files')
@push('styles')
@vite(['resources/css/crudTableStyler.css'])
@endpush
@section('content')
<div class="container-fluid p-4">
    <h1 class="fs-2"><strong>Manage Files</strong></h1>

    <div class="modal" id="uploadFileModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header bg-white">
              <h5 class="modal-title">{{ __('Upload File') }}</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" class="form m-0 p-0" action="{{ route('client.upload') }}" enctype="multipart/form-data">
                <div class="modal-body">
                    @csrf

                    <div class="row">

                        <div class="form-group col-sm-12 mb-2">
                            <label for="dataFile">{{ __('CSV File:') }}</label>
                            <input id="dataFile" type="file" class="form-control @error('dataFile') is-invalid @enderror bg-white" name="dataFile" required autofocus>
                        </div>

                        @if(auth()->user()->is_admin)
                        <div class="form-group col-sm-12 mb-2">
                            <label for="client_id">{{ __('Client:') }}</label>
                            <select class="form-control bg-white" name="client_id"  id="client_id">
                                <option value="" selected disabled>Select Client</option>
                                @foreach($clients as $client)
                                <option value="{{ $client->id }}">{{ $client->first_name.' '.$client->last_name.' ('.$client->company.') ' }}</option>
                                @endforeach
                            </select>
                        </div>
                        @else
                        <input type="hidden" name="client_id" value="{{ auth()->user()->id }}">
                        @endif

                        <div class="form-group col-sm-12 mb-2">
                            <label for="location_id">{{ __('Location:') }}</label>
                            <select class="form-control bg-white" name="location_id" id="location_id" required>
                                <option value="" selected disabled>Select Location</option>
                                @foreach($locations as $location)
                                <option value="{{ $location->id }}" data-client-id="{{ $location->client_id }}">{{ $location->address }}</option>
                                @endforeach
                            </select>
                        </div>

                    </div>

                </div>
                <div class="modal-footer justify-content-between bg-white">
                    <button type="button" class="btn btn-cancel text-secondary" data-bs-dismiss="modal">
                        {{ __('Cancel') }}
                    </button>
                    <button type="submit" class="btn btn-info text-white fw-semibold">
                        {{ __('Submit file') }}
                    </button>
                </div>
                </form>
          </div>
        </div>
      </div>

    <div class="d-flex flex-row justify-content-between pb-2 pt-3">
        <form method="get" action="{{ route('client.files') }}" class="justify-content-between pb-2 pt-3 w-25">
            <div class="input-group">
                <input type="text" class="form-control" name="search" placeholder="Search file..." 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="buttonTriggerNewDataFileModal" class="rounded-3 btn btn-info text-white fw-semibold float-right align-middle" data-placement="left" data-bs-toggle="modal" data-bs-target="#uploadFileModal">
                <i class='bx bx-plus-circle'></i>
                {{ __('UPLOAD FILE') }}
            </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">ID</th>
                    <th class="fw-semibold text-secondary">FILE NAME</th>
                    <th class="fw-semibold text-secondary">LOCATION</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">CREATED</th>
                    <th class="fw-semibold text-secondary text-center">ACTION</th>
                </tr>
            </thead>
            <tbody>
                @if($dataFiles->count())
                @foreach ($dataFiles as $dataFile)
                <tr class="align-middle" data-dataFile-filename="{{ $dataFile->filename ?? "" }}">

                    <td class="rounded-left">{{ $dataFile->id }}</td>
                    <td>{{ $dataFile->filename }}</td>
                    <td>
                        @if(isset($dataFile->location))
                        <small>{{ $dataFile->location->address }}</small>
                        @else
                        <span class="text-danger">n/a</span>
                        @endif
                    </td>
                    @if(auth()->user()->is_admin)
                    <td>{{ $dataFile->client->first_name.' '.$dataFile->client->last_name }}</td>
                    <td>{{ @$dataFile->location->user->company }}</td>
                    @endif
                    <td class="">{{ $dataFile->created_at->format('m/d/Y H:i') }}</td>
                    <td class="rounded-right text-center">

                        <form action="{{ route('dataFiles.destroy',$dataFile->id) }}" method="POST">
                            {{--
                                <a class="btn btn-transparent" title="Show File and Data" href="{{ route('client.files.show',$dataFile->id) }}">
                                    <span class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">
                                        <i class="bi-eye-fill"></i>
                                    </span>
                                </a>
                                --}}
                            <button type="submit" title="Delete File" class="btn btn-transparent">
                                <a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">
                                    <i class="bi-trash-fill"></i>
                                </a>
                            </button>

                            {{-- <a class="link-secondary link-underline-opacity-0 link-underline-opacity-100-hover">
                                <i class="bi bi-trash-fill"></i>
                            </a> --}}
                            @csrf
                            @method('DELETE')
                        </form>


                    </td>
                </tr>
                @endforeach
                @else
                <tr>
                    <td colspan="{{ (auth()->user()->is_admin)?'7':'5' }}" class="text-center fw-bold" style="vertical-align:middle;">No Files found.</td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>
    {!! $dataFiles->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())
    <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 file:</strong> {{ $error }}</p>
        @endforeach
    </div>
    @endif
</div>
@endif

@foreach($dataFiles as $dataFile)
@include('client.file.modal-delete', ['dataFile' => $dataFile])
@endforeach

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

    // CRUD FILES
        let uploadFile_selectClient = document.querySelector('#client_id');
        console.log(uploadFile_selectClient);
        let uploadFile_selectLocation = document.querySelector('#location_id');
        console.log(uploadFile_selectLocation);

        uploadFile_selectClient.addEventListener('change', () => {
            if
            (
            parseInt(uploadFile_selectLocation.options[uploadFile_selectLocation.selectedIndex].getAttribute('data-client-id'))
            !== parseInt(uploadFile_selectClient.value)
            )
                uploadFile_selectLocation.selectedIndex = 0;

            Array.prototype.forEach.call(uploadFile_selectLocation.options, (option) => {
                option.setAttribute('hidden', true);
                option.setAttribute('disabled', true);
                if(option.getAttribute('data-client-id') === uploadFile_selectClient.value)
                {
                    option.removeAttribute('hidden');
                    option.removeAttribute('disabled');
                }
            });
        });

        let deleteButtons = document.querySelectorAll('.deleteDataFileButton');
        let deleteForms = document.querySelectorAll('.deleteDataFileForm');

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

    // Disappear alerts

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

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

        }, 3500);
</script>


{{-- @if ($message = Session::get('success'))
<div class="alert alert-success d-flex flex-column justify-content-center align-items-center">
    @elseif ($message = Session::get('warning'))
    <div class="alert alert-warning d-flex flex-column justify-content-center align-items-center">
        @elseif ($errors->any())
        <div class="alert alert-danger d-flex flex-column justify-content-center align-items-center">
            @endif
            @if($errors->any())
            @foreach($errors->all() as $error)
            <p class="text-center m-0 p-0">{{ $error }}</p>
            @endforeach
            @else
            <p class="text-center m-0 p-0">{{ $message }}</p>
            @if(Session::get('dataLogRows') !== null && Session::get('dataLogInserts') !== null)
            <p class="text-center mt-3 mb-0 mx-0 p-0"><strong>{{ Session::get('dataLogRows') }}</strong> entries read in file, <strong>{{ Session::get('dataLogInserts') }}</strong> inserted in database.</p>
            @endif
            @endif

            @if ($message = Session::get('success') || $message = Session::get('warning') || $errors->any())
        </div>
    </div>
    @endif

</div> --}}
@endsection