@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-user-tie mr-1"></i>
                Personne physique @if(!empty($tiers->id_tiers)): <span class="text-orange-500">{{$tiers->id_tiers}}</span>@endif
            </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.edit', [
                    'id_tiers'  =>$tiers->id_tiers,
                    'type_tiers'=>strtolower($tiers->type_tiers)]) }}" class="hover:text-orange-500" title="Modifier les informations">
                    <i class="fal fa-edit fa-lg"></i>
                </a>
                <a href="{{route('tiers.index')}}" class="hover:text-orange-500" title="Imprimer le fiche signaletique de memrbe">
                    <i class="fal fa-print fa-lg"></i>
                </a>
                <a href="{{route('tiers.doc.index', $tiers->id_tiers)}}" class="text-orange-400" title="Ajouter autres documents">
                    <i class="fad fa-folder fa-lg mr-2"></i>
                </a>
            </div>
        </div>

        <x-alert/>
        <div class="flex items-center justify-center text-xl mb-3 font-bold pl-10 text-white text-opacity-50 py-2 bg-cyan-800">
            {{$tiers->nom_tiers}}  {{ucwords(strtolower($tiers->prenom_tiers))}}
            @if(!empty($tiers->age)) ({{$tiers->age}} ans) @endif
        </div>
        <div class="card-body border rounded-md shadow-md px-5">
            <div class="flex space-x-3">
                <div class="relative w-24 h-24 card-img">
                    <div>
                        <img src="{{!empty($photo)?$photo:asset('img/user.png')}}" alt="" class="border-4 cursor-pointer rounded-lg shadow-md border-white w-24 h-24">
                    </div>
                    <div class="hidden img-btn-action items-center justify-center space-x-3 absolute inset-0 bg-gray-800 bg-opacity-50 rounded-md">
                        <button id="imgIdentite"  class="text-orange-500 text-opacity-80">
                            <i class="fas fa-search fa-xl"></i>
                        </button>
                        <button class="photo text-orange-500 text-opacity-80" data-objet="photo" data-url="{{$url}}">
                            <i class="fad fa-camera fa-xl"></i>
                        </button>
                    </div>
                </div>
                <div class="relative w-24 h-24 card-img">
                    <div>
                        <img src="{{!empty($signature)?$signature:asset('img/signature.jpg')}}" alt="" class="border-4 cursor-pointer rounded-lg shadow-md border-white w-24 h-24">
                    </div>
                    <div class="hidden img-btn-action items-center justify-center space-x-3 absolute inset-0 rounded-md">
                        <button id="imgSignature"  class="text-orange-500 text-opacity-80">
                            <i class="fas fa-search fa-xl"></i>
                        </button>
                        <button class="photo text-orange-500 text-opacity-80" data-objet="signature" data-url="{{$url}}">
                            <i class="fad fa-camera fa-xl"></i>
                        </button>
                    </div>
                </div>
                <div class="relative h-24 card-img">
                    <div>
                        <img src="{{!empty($copie_cin)?$copie_cin:asset('img/carte_identite.jpg')}}" class="border-4 cursor-pointer rounded-lg shadow-md border-white h-24">
                    </div>
                    <div class="hidden img-btn-action items-center justify-center space-x-3 absolute inset-0 bg-gray-800 bg-opacity-50  rounded-md">
                        <button id="imgCin"  class="text-orange-500 text-opacity-80">
                            <i class="fas fa-search fa-xl"></i>
                        </button>
                        <button class="photo text-orange-500 text-opacity-80" data-objet="cin" data-url="{{$url}}">
                            <i class="fad fa-camera fa-xl"></i>
                        </button>
                    </div>
                </div>
            </div>
            @include('tiers.pp.pp-majeur')
        </div>
        
    </div>

    <x-photo-tiers :photo="$photo" :signature="$signature"></x-photo-tiers>

    <x-cin :copiecin="$copie_cin"></x-cin>

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

    <x-msg-box>
        <x-slot name="title">Réactivation</x-slot>
        <p id="textMsg"></p>
    </x-msg-box>

@endsection

@section('script')
    <script>

        document.getElementById('imgIdentite').addEventListener("click", function(e){
            Modal("#photoTiers", "show");
        })
        document.getElementById('imgSignature').addEventListener("click", function(e){
            Modal("#photoTiers", "show");
        })
        document.getElementById('imgCin').addEventListener("click", function(e){
            Modal("#cinTiers", "show");
        })


        let btnPhoto = document.querySelectorAll('.photo');

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

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

                let objet = this.getAttribute('data-objet');
                let url = this.getAttribute('data-url');

                document.getElementById('objetFile').setAttribute('value', objet);
                document.getElementById('urlModule').setAttribute('value', url);

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

            })

        }

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

        let cardImgs = document.querySelectorAll(".card-img");

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

            cardImgs[i].addEventListener('click',function(e){

                let btnAction = this.getElementsByClassName('img-btn-action')[0];

                let statusAction = btnAction.classList.contains('hidden');

                console.log(statusAction);

                if(statusAction){
                    btnAction.classList.remove('hidden');
                    btnAction.classList.add('flex');
                }else{
                    btnAction.classList.remove('flex');
                    btnAction.classList.add('hidden');
                }

            });

        }


        let onglets = document.querySelectorAll(".onglet");

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

            onglets[i].addEventListener('click', function(e){

                let ongletActif = this.getAttribute('data-groupe');

                let groupeElement = document.querySelectorAll(".groupe");

                for (let j = 0; j < groupeElement.length; j++) {


                    if(ongletActif == groupeElement[j].getAttribute('id')){
                        groupeElement[j].classList.toggle("hidden");
                    }

                    console.log(ongletActif +' '+groupeElement[j].getAttribute('id'));

                }

            })
        }        

        let btnRevenant = document.querySelectorAll('.btn-revenant');

        btnRevenant.forEach(revenant => {

            revenant.addEventListener('click', function(e){

                let decision = revenant.getAttribute('data-decision');

                msg = "Voulez vous réellement accorder cette demande";

                if(decision == '3'){

                    msg = "Voulez vous réellement refuser cette demande";

                }

                document.getElementById('decision').setAttribute('value', decision);

                document.getElementById('textMsg').textContent=msg;

                Modal('#MsgBox', 'show');
            });

       });

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

    </script>
@endsection