@extends('layouts.app')

@section('content')
<h2>Membres</h2>
<p><strong>Nombre de membre théorique dans la salle : </strong><span id="members_online">0</span> / {{ $nb_member_with_abo }} <a class="btn btn-secondary" href="#" id="maj_number_member">MAJ</a></p>
<p><a class="btn btn-primary" href="{{ route('member.create') }}">Ajouter</a>
    @if (Cookie::get('interface') != 'jfdhfdqlmlmqokdhfozqojofdogfdoijoqofd')
        <a class="btn btn-secondary" href="{{ route('set_interface') }}">Autoriser cette interface</a>
    @endif
</p>
<div>
    <h4>Filtres :</h4>
    <div class="form-check" style="display:inline-block;margin-right:20px;">
        <input class="form-check-input" name="abo" type="checkbox" id="only_abo"/>
        <label class="form-check-label" for="abo">Avec abonnement</label>
    </div>
    <div class="form-check" style="display:inline-block;margin-right:20px;">
        <input class="form-check-input" name="noabo" type="checkbox" id="only_noabo"/>
        <label class="form-check-label" for="noabo">Sans abonnement</label>
    </div>
    <div class="form-check" style="display:inline-block;margin-right:20px;">
        <input class="form-check-input" name="credit" type="checkbox" id="credit"/>
        <label class="form-check-label" for="credit">Reste à payer</label>
    </div>
    <div class="form-group" style="display:inline-block">
        <input name="name_search" placeholder="Recherche" class="form-control" type="text" id="name_search"/>
    </div>
    <div class="form-group" style="display:inline-block">
        <a class="btn btn-primary" href="#" id="search">Rechercher</a>
    </div>
    <div id="nbresult" class="form-group" style="display:inline-block;padding-left:20px;font-weight:bold;color:#3490dc">
        <span>les 20 Derniers membres ajoûtés</span>
    </div>

</div>
<table class="table" id="members">
    <thead>
    <tr>
        <th scope="col">Abonnement</th>
        <th scope="col">Coût</th>
        <th scope="col">Reste à payer</th>
        <th scope="col">Nom</th>
        <th scope="col">Prénom</th>
        <th scope="col">Email</th>
        <th scope="col">Pays</th>
        <th scope="col">Tel</th>
        <th scope="col">Cours</th>
        <th scope="col">Code</th>
        <th scope="col">Actions</th>
    </tr>
    </thead>
    <tbody>
    @foreach($members as $member)
        <tr class="row_result">
            <td style="padding-top:2px;padding-bottom:2px;vertical-align:middle;background-color: @if($member->subscription_state() == 1)
            {{ '#28a745' }}
            @elseif($member->subscription_state() == 0)
            {{ '#dc3545' }}
            @else
            {{ '#856404' }}
            @endif;text-align: center;color: white;">{!!  $member->last_date_subscription() !!}</td>
            <td style="background-color: @if($member->subscription_state() == 1)
            {{ '#28a745' }}
            @elseif($member->subscription_state() == 0)
            {{ '#dc3545' }}
            @else
            {{ '#856404' }}
            @endif;text-align: left;color: white;">{!!  $member->last_date_subscription_cost() !!}</td>
            <td style="background-color: @if($member->subscription_state() == 1)
            {{ '#28a745' }}
            @elseif($member->subscription_state() == 0)
            {{ '#dc3545' }}
            @else
            {{ '#856404' }}
            @endif;text-align: left;color: white;">{!!  $member->last_date_subscription_credit() !!}</td>
            <td style="text-transform: capitalize;">{{ $member->lastname }}</td>
            <td>{{ $member->firstname }}</td>
            <td>{{ $member->email }}</td>
            <td>{{ $member->country }}</td>
            <td>{{ $member->tel }}</td>
            <td>
                @if($member->gym) {{ 'Gym' }} @endif
                @if($member->gym and $member->crossfit) {!! "<br \>" !!} @endif
                @if($member->crossfit) {{ 'Crossfit' }} @endif
            </td>
            <td>{{ $member->code }}</td>
            <td>
                <a class="btn btn-primary" href="{{ route('add_subscription', $member) }}">Ajouter un abonnement</a>
                <a class="btn btn-secondary" href="{{ route('list_subscription', $member) }}">Détails</a>
                <a class="btn btn-secondary" href="{{ route('member.edit', $member) }}">Éditer</a>
                <button class="btn btn-del" data-name="{{ $member->lastname . ' ' .$member->firstname }}" data-href="{{ route('member_destroy', $member) }}" data-toggle="modal" data-target="#exampleModal">Supprimer</button>
            </td>
        </tr>
    @endforeach
    </tbody>
</table>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="mod-sup-dial" class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
                <a id="btn-del-final" type="button" class="btn btn-primary">Supprimer</a>
            </div>
        </div>
    </div>
</div>
<div id="toasts" aria-live="polite" aria-atomic="true" style="position: absolute; top: 10px; right: 10px;"></div>
<script type="application/javascript">
    $(document).ready(function() {
        $('.btn-del').click(function(){
            $('#mod-sup-dial').html('Êtes-vous sûre de vouloir supprimer toutes les données concernant ' + $(this).data('name'));
            $('#btn-del-final').prop('href', $(this).data('href'));
        });
        // $("input[name='abo']").change(function(){
        //    if($(this).prop('checked')){
        //        $('.row_result').each(function(){
        //           if($(this).data('abo') == 0){
        //               $(this).css('display', 'none');
        //               $("#name_search").val('');
        //           }
        //        });
        //    }else{
        //        $('.row_result').each(function(){
        //            if($(this).data('abo') == 0){
        //                $(this).css('display', 'table-row');
        //                $("#name_search").val('');
        //            }
        //        });
        //    }
        // });
        $("input[name='noabo']").change(function(){
            if($(this).prop('checked') && $("input[name='abo']").prop("checked")) {
                $("input[name='abo']").prop("checked", false);
            }
        });
        $("input[name='abo']").change(function(){
            if($(this).prop('checked') && $("input[name='noabo']").prop("checked")) {
                $("input[name='noabo']").prop("checked", false);
            }
        });
        // $("#name_search").keyup(function(){
        //     $("input[name='noabo']").prop('checked', false);
        //     $("input[name='abo']").prop('checked', false);
        //     $('.row_result').not("[data-name*='" + $(this).val().toLowerCase() + "']").each(function(){
        //         $(this).css('display', 'none');
        //     });
        //     $(".row_result[data-name*='" + $(this).val().toLowerCase() + "']").each(function(){
        //         $(this).css('display', 'table-row');
        //     });
        //     if($("#name_search").val() == ''){
        //         $('.row_result').css('display', 'table-row');
        //     }
        //     // if(!$("#name_search").val()){
        //     //     $('.row_result').css('display', 'table-row');
        //     // }
        // });
        @guest

        @else
        $("#myToast").on('hidden.bs.toast', function(){
            alert("Toast component has been completely closed.");
        });
        var i = 1;
        setInterval(function(){
            $.ajax({
                method: 'POST',
                url: '{{ route('get_notif') }}',
                data: {
                    "_token": "{{ csrf_token() }}"
                },
            })
                .done(function(data) {
                    data = JSON.parse(data);
                    //console.log(data);

                    data.forEach(function(element){
                        var color = '#856404';
                        if(element['gravity'] == 0){
                            color = '#28a745'
                        }
                        if(element['gravity'] == 2){
                            color = '#dc3545'
                        }
                        var toast = `
                    <div id="toast` + i + `" data-delay="100000" style="max-width:585px;width:585px;background-color: ` + color + `;color: ` + color + `" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                      <div class="toast-header">
                        <table><tr>
                            <td style="width:115px;display:inline-block">
                                <img style="width:100px;image-orientation: from-image;" src="` + element['member_photo'] + `" class="rounded mr-2">
                            </td>
                            <td style="width:100px;">` + element['datelog'] + `</td>
                            <td style="width:350px;">
                                ` + element['log'] + `
                            </td>
                            <td style="width:20px;">
                                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                                </button>
                            </td>
                        </tr></table>
                      </div>

                    </div>
                    `
                        $('#toasts').append(toast);
                        $('#toast' + i).toast('show');
                        i = i + 1;
                    });

                })
                .fail(function(data) {

                });

        },5000);
        $('#maj_number_member').click(function() {
            $.ajax({
                method: 'POST',
                url: '{{ route('get_number_member') }}',
                data: {
                    "_token": "{{ csrf_token() }}"
                },
            })
                .done(function(data) {
                    $('#members_online').html(data);
                })
                .fail(function(data) {

                });
        });
        $.ajax({
            method: 'POST',
            url: '{{ route('get_number_member') }}',
            data: {
                "_token": "{{ csrf_token() }}"
            },
        })
            .done(function(data) {
                $('#members_online').html(data);
            })
            .fail(function(data) {

            });
        function reverse_date(date) {
            return date.substring(8,10) + "-" + date.substring(5,7) + "-" + date.substring(0,4)
        }
        $('#search').click(function(){
            var abo = '2';
            var credit = '0';
            if ($("input[name='credit']").prop( "checked" )){
                credit = '1'
            }
            if ($("input[name='noabo']").prop( "checked" )){
                abo = '0'
            }
            if ($("input[name='abo']").prop( "checked" )){
                abo = '1'
            }
            $.ajax({
                method: 'POST',
                url: '{{ route('search_member') }}',
                data: {
                    "_token": "{{ csrf_token() }}",
                    "isAbo": abo,
                    "name": $("input[name='name_search']").val(),
                    "credit": credit
                },
            })
                .done(function(data) {
                    data = JSON.parse(data);
                    //console.log(data);
                    $('#members tbody tr').empty();
                    var nbResult = 0
                    data.forEach(function(element){
                        nbResult = nbResult + 1;

                        var cours = ""
                        if (element['gym'] == 1) {
                            cours += "gym"
                        }
                        if (element['gym'] == 1 && element['crossfit'] == 1) {
                            cours += "<br />"
                        }
                        if (element['crossfit'] == 1) {
                            cours += "crossfit"
                        }
                        var credit = "0 Rps"
                        if (element['last_date_subscription_credit'] != null) {
                            credit = element['last_date_subscription_credit'] + " Rps";
                        }
                        var date = ""
                        if (element['last_date_subscription_end'] != null) {
                            date = reverse_date(element['last_date_subscription_start']) + " <br /><strong>" + reverse_date(element['last_date_subscription_end']) + "</strong>";
                        }
                        var cost = ""
                        if (element['last_date_subscription_cost'] != null) {
                            cost = element['last_date_subscription_cost'] + " Rps";
                        }
                        if (cost == "0 Rps") {
                            color = '#dc3545';
                        }else{
                            if (credit == "0 Rps") {
                                color = '#28a745';
                            }else{
                                color = '#856404';
                            }
                        }
                        if(element['subscription_state'] == 0){
                            color = '#dc3545'
                        }
                        var member = `
                    <tr class="row_result">
                      <td style="padding-top:2px;padding-bottom:2px;vertical-align:middle;background-color:` + color + `;text-align: center;color: white;">
                            ` + date + `
                      </td>
                      <td style="background-color:` + color + `;text-align: center;color: white;">
                            ` + cost + `
                      </td>
                      <td style="background-color:` + color + `;text-align: center;color: white;">
                            ` + credit + `
                      </td>
                      <td style="text-transform: capitalize;">
                            ` + element['lastname'] + `
                      </td>
                      <td>
                            ` + element['firstname'] + `
                      </td>
                      <td>
                            ` + element['email'] + `
                      </td>
                      <td>
                            ` + element['country'] + `
                      </td>
                      <td>
                            ` + element['tel'] + `
                      </td>
                      <td>
                            ` + cours + `
                      </td>
                      <td>
                            ` + element['code'] + `
                      </td>
                      <td>
                        <a class="btn btn-primary" href="member/add_subscription/` + element['id'] + `">Ajouter un abonnement</a>
                        <a class="btn btn-secondary" href="member/list_subscription/` + element['id'] + `">Détails</a>
                        <a class="btn btn-secondary" href="member/` + element['id'] + `/edit">Éditer</a>
                        <button class="btn btn-del" data-name="` + element['lastname'] + ' ' + element['firstname'] + `" data-href="` + window.location.origin + `/member/destroy/` + element['id'] + `" data-toggle="modal" data-target="#exampleModal">Supprimer</button>
                      </td>
                    </tr>
                    `
                        $('#members tbody').append(member);
                    });
                    var message = "";
                    var filtreNom = "";
                    if ($("input[name='name_search']").val() != "") {
                        filtreNom = " &#x3C;nom/email/tel/code contenant : " + $("input[name='name_search']").val() + "&#x3E;";
                    }
                    var filtreAbo = ""
                    if (abo == "1") {
                        filtreAbo = " &#x3C;possède un abonnement actif&#x3E;";
                    }
                    if (abo == "0") {
                        filtreAbo = " &#x3C;ne possède pas d'abonnement actif&#x3E;";
                    }
                    if (nbResult == 0) {
                        message= "Pas de résultat pour : " + filtreNom + filtreAbo;
                    }else{
                        message = nbResult.toString() + " résultats pour : " + filtreNom + filtreAbo;
                    }
                    if (nbResult > 0 && filtreAbo == "" && filtreNom == "") {
                        message = nbResult.toString() + " résultats";
                    }
                    $("#nbresult").html(message);
                    $('.btn-del').click(function(){
                        $('#mod-sup-dial').html('Êtes-vous sûre de vouloir supprimer toutes les données concernant ' + $(this).data('name'));
                        $('#btn-del-final').prop('href', $(this).data('href'));
                    });
                })
                .fail(function(data) {

                });
        });
        @endguest

    });
</script>
@endsection