@extends('layout')

@section('body')
<div class="row px-0 px-md-3 my-4">
    @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
    <!-- js message alert -->
    <div class="msgbox msgbox-success">
        <span class="fw-medium"></span>
        <span class="msgboxclose btn-close pointer"></span>
    </div>
    <div class="msgbox msgbox-danger">
        <span class="fw-medium"></span>
        <span class="msgboxclose btn-close pointer"></span>
    </div>
    <!-- js message alert -->
    <div class="col-12 mb-3">
        <div class="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>
    </div>

    @if($usr->role!='owner')
    <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">
    </form>
    @endif

    <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">
                @if($images)
                @foreach($images as $i => $image)
                <div class="p-2 mx-1 mb-2 text-center">
                    <div style="height:100px;" class="img-thumbnail overflow-hidden">
                        <a href="{{asset($image['src'])}}" data-fancybox="gallery" data-caption="{{$image['date']}}">
                            <img src="{{ asset($image['src']) }}" class="img-fluid" width="100" height="100">
                        </a>
                    </div>
                    @if($usr->role == 'admin')
                    <div><span class="icon-inactive pointer" onclick="deletefiles('images',{{$i}},this)"><i class="bi bi-trash"></i></span></div>
                    @endif
                </div>
                @endforeach
                @endif
            </div>
        </div>
    </div>

    <div class="col-12 mb-3">
        <div class="blck-white fileblock">
            <h5 class="ms-2 my-2">Files:</h5>
            @if($files)
            @foreach($files as $f => $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>
                @if($file['ext'])
                <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>
                @endif
                <div class="px-2 py-1 {{$usr->role=='admin'?'border-top border-bottom border-start':'border'}}"><a href="{{ $file['src'] }}" download="{{$file['name']}}" class="icon-inactive"><i class="bi bi-file-earmark-arrow-down"></i></a></div>
                @if($usr->role == 'admin')
                <div class="px-2 py-1 border"><span class="icon-inactive pointer" onclick="deletefiles('files',{{$f}},this)"><i class="bi bi-trash"></i></span></div>
                @endif
            </div>
            @endforeach
            @endif
        </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]",{});
</script>

@if($usr->role!='owner')
<script>
document.addEventListener('DOMContentLoaded', function(){
    const spinner = document.querySelector('.spinner');
    const labelUpload = document.querySelector('.label-upload');
    const fileInput = document.querySelector('#fileInput');

    fileInput.addEventListener('change', (e) => {
        e.preventDefault();

        labelUpload.style.display = 'none';
        spinner.style.display = 'block';

        const form = document.querySelector('form.upload');
        const formData = new FormData(form);

        fetch('/store/files', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
        })
        .then(response => {
            if (!response.ok) {
                labelUpload.style.display = 'block';
                spinner.style.display = 'none';
                throw new Error('Network response was not ok');
            }
            return response.text();
        })
        .then(data => {
            console.log(data);
            if(data === 'uploaded') {
                window.location.reload();
            }
        })
        .catch(error => {
            console.log(error);
        });
    });
});
</script>
@endif

@if($usr->role == 'admin')
<script>
const msgboxSuccess = document.querySelector('.msgbox-success');
const msgboxError = document.querySelector('.msgbox-danger');
function deletefiles(model,id,e){
    fetch('/delete/files', {
        method:'PUT',
        body:JSON.stringify({'model':model,'id':id}),
        headers:{
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        }
    })
    .then(response => {
        if(response.ok){
            return response.text();
        }
    })
    .then(data => {
        console.log(data);
        if(data == 'deleted'){
            e.parentElement.parentElement.remove();
            msgboxSuccess.style.display = 'block';
            msgboxSuccess.firstElementChild.innerText='File was deleted.';
        }
    })
    .catch(error => {
        console.log(error);
        msgboxError.style.display = 'block';
        msgboxError.firstElementChild.innerText='Something gone wrong. Please contact to admin.';
    });
}
</script>

<script>
// js msgbox alert
document.addEventListener('DOMContentLoaded', function(){
  const msgboxCloseBtn = document.querySelectorAll('.msgboxclose');
  msgboxCloseBtn.forEach((elem)=>{
    elem.addEventListener('click',(e)=>{
      e.target.closest('div').style.display='none';
      e.target.previousElementSibling.innerHTML='';
    });
  });
});
</script>
@endif
@endsection