@extends('driver._layout')

@if(session('message'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>{{ session('message') }}</strong>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

@section('body')
<div class="row px-0 px-md-3 my-4">
    <div class="col-12 mb-3 blck-white inner-page-menu">
        <ul class="nav nav-pills justify-content-center">
            <li class="nav-item mx-1 mb-2 mb-md-0"><a class="nav-link" href="/loads/{{$load_id}}"><i class="bi bi-file-earmark-text"></i> Preview</a></li>
            <li class="nav-item mx-1 mb-2 mb-md-0"><a class="nav-link" href="/loads/{{$load_id}}/report"><i class="bi bi-chat-square-dots"></i> Reports</a></li>
            <li class="nav-item mx-1 mb-2 mb-md-0"><a class="nav-link disabled active" href="/loads/{{$load_id}}/files"><i class="bi bi-file-earmark-pdf"></i> Files</a></li>
        </ul>
    </div>

    @if(session('message'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <strong>{{ session('message') }}</strong>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    <div class="statusmessage alert alert-success alert-dismissible fade show" role="alert" style="display:none">
        <strong>Your files were uploaded.</strong>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <form id="uploadForm" method="POST" action="/loads/{{$load_id}}/upload" class="col-12 col-md-4 mb-2 upload" enctype="multipart/form-data">
        <div class="spinner btn btn-primary w-100" style="display:none;"><span class="spinner-border spinner-border-sm" aria-hidden="true"></span></div>
        <label class="label-upload form-label btn btn-primary w-100" for="fileInput">Select files</label>
        <input type="file" name="files[]" id="fileInput" class="visually-hidden" accept=".jpg, .jpeg, .svg, .png, .heic, .pdf, .xlsx, .csv, .xls, .doc, .docx, .txt, .rtf" multiple>
    </form>

    <div class="col-12 mb-3">
        <div class="blck-white">
            <h5 class="ms-2 my-2">Images:</h5>
            <div class="d-flex flex-row flex-wrap imageblock">
                @foreach($images as $image)
                <div class="p-2 border mx-1 mb-2">
                    <a href="{{$image['src']}}" data-fancybox="gallery" data-caption="{{$image['date']}}" class="w-100">
                        <img src="{{ $image['src'] }}" class="img-fluid" width="100" height="100">
                    </a>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="col-12 mb-3">
        <div class="blck-white fileblock">
            <h5 class="ms-2 my-2">Files:</h5>
            @foreach($files as $file)
            <div class="d-flex flex-row mb-2">
                <div class="px-2 py-1 border">{{ $file['date'] }}</div>
                <div class="px-2 py-1 border-top border-bottom flex-fill">{{ $file['name'] }}</div>
                <div class="px-2 py-1 border-top border-bottom border-start"><a data-fancybox data-type="pdf" href="{{ $file['src'] }}" class="icon-inactive"><i class="bi bi-filetype-pdf"></i></a></div>
                <div class="px-2 py-1 border"><a href="{{ $file['src'] }}" download="{{$file['src'].'.pdf'}}" class="icon-inactive"><i class="bi bi-file-earmark-arrow-down"></i></a></div>
            </div>
            @endforeach
        </div>
    </div>

</div>
@endsection

@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
@endsection

@section('script')
<script>
Fancybox.bind("[data-fancybox]", {
  // Your custom options
});
</script>
<script>
const spiner = document.querySelector('.spinner');
const labelUpload = document.querySelector('.label-upload');
const fileInput = document.querySelector('#fileInput');
const statusmessage = document.querySelector('.statusmessage');
console.log(fileInput);
fileInput.addEventListener('change', (e) => {
    e.preventDefault();
    labelUpload.style.display='none';
    spiner.style.display='block';
    const form = document.querySelector('form.upload');
    const formData = new FormData(form);

    fetch('/loads/{{$load_id}}/upload', {
        method: 'POST',
        body: formData,
        headers:{
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
    })
    .then(response => {
        if(!response.ok){
            labelUpload.style.display='block';
            spiner.style.display='none';
            throw new Error('Network response was not ok');
        }
        return response.text();
    })
    .then(dataText => {
        if(dataText == 1)
            reloadData();
    })
    .catch(error => {
        console.log(error);
    })
});

function reloadData(){
    const imageBlock = document.querySelector('.imageblock');
    const fileBlock = document.querySelector('.fileblock');
    fetch('/api/loads/{{$load_id}}/files', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
        }
    })
    .then(response => {
        if(!response.ok){
            throw new Error('Network response was not ok');
        }
        statusmessage.style.display="block";
        return response.json();
    })
    .then(result => {
        var data = JSON.parse(result);
        var newImagesBlock = '';
        var newFilesBlock = '<h5 class="ms-2 my-2">Files:</h5>';
        data.forEach(file => {
            var ext = file.src.split('.').pop().toLowerCase();
            if (['jpg', 'jpeg', 'png', 'gif', 'svg', 'heic', 'heif'].includes(ext)) {
                newImagesBlock+=`<div class="p-2 border mx-1 mb-2">
                    <a href="${file.src} data-fancybox="gallery" data-caption="${file.date}">
                        <img src="${file.src}" width="100" height="100" class="img-fluid">
                    </a>
                </div>`;
            } else {
                newFilesBlock+=`<div class="d-flex flex-row mb-2">
                <div class="px-2 py-1 border">${file.date}</div>
                <div class="px-2 py-1 border-top border-bottom flex-fill">${file.name}</div>
                <div class="px-2 py-1 border-top border-bottom border-start"><a data-fancybox data-type="pdf" href="${file.src}" class="icon-inactive"><i class="bi bi-filetype-pdf"></i></a></div>
                <div class="px-2 py-1 border"><a href="${file.src}" download="${file.name}.pdf" class="icon-inactive"><i class="bi bi-file-earmark-arrow-down"></i></a></div>
            </div>`;
            }
        });
        imageBlock.innerHTML = newImagesBlock;
        fileBlock.innerHTML = newFilesBlock;
        labelUpload.style.display="block";
        spiner.style.display="none";
    })
    .catch(error => {
        console.log('err: ' + error);
    })
}
</script>
@endsection