@extends('layouts.app')

@section('content')
    <div class="card w-4/5">
        <div class="card-head mb-5 text-gray-500">
            <div class="font-semibold text-cyan-900 uppercase">
                <i class="fal fa-folder mr-1"></i>
                Documents
            </div>
            <div class="space-x-2">
                <a href="{{route('tiers.index')}}" class="hover:text-orange-500" title="Recher un membre">
                    <i class="fal fa-list fa-lg"></i>
                </a>
                <a href="{{route('tiers.show', $tiers->id_tiers)}}" class="hover:text-orange-500" title="Recher un membre">
                    <i class="fal fa-user-tie fa-lg"></i>
                </a>
            </div>
        </div>
        <x-alert/>
        <x-tiers-bannier :tiers="$tiers"/>
        <div class="card-content">
            <table class="table table-striped table-hover text-sm">
                <thead>
                    <tr>
                        <td></td>
                        <th class="text-left">Titre de document</th>
                        <th class="text-left">Déscription</th>
                        <th class="text-left">Document</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($docs as $doc)
                        <tr>
                            <td></td>
                            <td>{{$doc->title}}</td>
                            <td>{{$doc->description}}</td>
                            <td>
                                @if(key_exists($doc->id_doc, $docCollections))
                                    @foreach ($docCollections[$doc->id_doc] as $itemDoc)
                                        @php
                                            $itemDoc = (object)$itemDoc;
                                        @endphp
                                        <ul>
                                            <li>
                                                <a href="{{route('tiers.doc.download', $itemDoc->file_name)}}" class="text-gray-500 hover:text-cyan-500 mr-2">
                                                    {{$itemDoc->original_name}}
                                                </a>
                                                <button data-pj="{{$itemDoc->id_pj}}" data-doc="{{$itemDoc->original_name}}" class="btn-times text-red-500"><i class="fal fa-times"></i></button>
                                            </li>
                                        </ul>
                                    @endforeach
                                @endif
                            </td>
                            <td class="text-right">
                                <a href="#" data-tiers="{{$tiers->id_tiers}}" data-doc="{{$doc->id_doc}}"
                                    class="add-doc text-gray-500 hover:text-orange-500 mr-2" title="Ajouter un document">
                                    <i class="fal fa-paperclip fa-lg"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <form id="frmDoc" method="post" action="{{route('tiers.doc.destroy')}}">
            @csrf
            <input type="hidden" name="idPj" id="idPj">
        </form>
    </div>

    <x-tiers-modal :tiers="$tiers"></x-tiers-modal>

    <x-import-file :params="$params">
        <input type="hidden" name="tiersId" id="tiersId">
        <input type="hidden" name="docId" id="docId">
    </x-import-file>

    <x-msg-box>
        <x-slot name="title">Document</x-slot>
        <div id="textMsg"></div>
    </x-msg-box>

@endsection

@section('script')
    <script>

        let addDoc = document.querySelectorAll('.add-doc');

        for (let i = 0; i < addDoc.length; i++) {

            addDoc[i].addEventListener('click', function(e){
                e.preventDefault();

                let idTiers = this.getAttribute('data-tiers');
                let idDoc = this.getAttribute('data-doc');

                document.getElementById('tiersId').setAttribute('value', idTiers);
                document.getElementById('docId').setAttribute('value', idDoc);

                Modal("#modalFile", "show");

            })

        }

        let btnTimes = document.querySelectorAll('.btn-times');

        if(btnTimes.length > 0){
            for (let i = 0; i < btnTimes.length; i++) {
                btnTimes[i].addEventListener('click', function(e){
                    e.preventDefault();
                    document.getElementById('idPj').setAttribute('value', this.getAttribute('data-pj'));
                    let fileName = this.getAttribute('data-doc')
                    document.getElementById('textMsg').innerHTML = '<p>Voulez vous réelement supprimer le document suivant : <br><span class="text-orange-500">' + fileName + '</span></p>';
                    Modal("#MsgBox", "show");
                })
            }
        }

        document.getElementById('btnSend').addEventListener("click", function(e){
            document.getElementById('frmFile').submit();
        });

        document.getElementById('btnYes').addEventListener('click', function(e){
            document.getElementById('frmDoc').submit();
        })

    </script>
@endsection