@extends('layouts/menu_et_footer')


@section('title')
    Liste des réunions | {{config('app.name')}}
@endsection

@section('container-fluid')
<div class="container-fluid">
    <!-- petite entete dans laquelle on avait écrit basic tables-->
    <div class="row bg-title">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">Accédez à toutes vos réunions ici...</h4>
        </div>
        {{-- <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <button class="right-side-toggle waves-effect waves-light btn-info btn-circle pull-right m-l-20"><i class="ti-settings text-white"></i></button>
            <a target="_blank" class="btn btn-danger pull-right m-l-20 hidden-xs hidden-sm waves-effect waves-light">GestSurvey</a>
        </div> --}}
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box">
                @include('partials.modals.room.add')
                @include('partials.modals.room.edit')
                <div class="d-flex justify-content-between">
                    <h3 class="bsox-title">Liste des réunions</h3>
                    <p>
                        Ajouter une réunion
                        <button class="btn btn-success btn-circle text-center" data-toggle="modal" data-target="#modal_room_add"><i class="fa fa-plus"></i></button>
                    </p>
                </div>
                    {{-- <p class="text-muted m-b-30">Liste des réunions</p> --}}
                <div class="table-responsive">
                    <table id="room-table" class="table ">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>ID de la réunion</th>
                                <th>Mot de passe</th>
                                <th>Date</th>
                                <th>Intitulé</th>
                                <th>Lien</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($rooms as $room)
                            <tr id="room-row-{{$room['id']}}" data-room="{{$room['id']}}" class="border-bottom">
                                <td>{{isset($i)?--$i:$i = count($rooms)}}</td>
                                <td><span class="text-muted">{{$room['id']}} </span> </td>
                                <td><span class="text-muted"> {{$room['password']}}</span> </td>
                                <td>{{date_format(date_create($room['datetime']), "d/m/Y à H:i")}}</td>
                                <td><span class="text-muted"> {{$room['name']}}</span> </td>
                                <td>
                                    <span class="room-link">{{$room['share_link']}}</span>
                                    <button class="btn btn-copy-link" title="Copier"><i class="mdi mdi-content-copy"></i></button>
                                </td>
                                <td class="d-flex justify-content-center border-0">
                                    <a href="{{$room['owner_link']}}" {{-- target="_blank" --}} class="btn btn-outline-success border-success mx-1" title="Démarrer"><i class="mdi mdi-login-variant"></i></a>
                                    <button class="btn btn-outline-info border-info btn-edit-room mx-2" data-toggle="modal" data-target="#modal_room_edit" title="modifier"><i class="fa fa-pencil"></i></button>
                                    <button class="btn btn-outline-danger border-danger btn-delete-room mx-1" title="supprimer"><i class="fa fa-trash"></i></button>
                                </td>
                            </tr>
                            @empty
                            @endforelse
                        </tbody>
                        {{-- <tfoot>
                            <tr>
                                <td colspan="7">
                                    <div class="text-right ">
                                        <ul class="pagination"> </ul>
                                    </div>
                                </td>
                            </tr>
                        </tfoot> --}}
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>

    $('#form-add-room').submit(function (e) {
        e.preventDefault();

        let block_ele = $('#form-add-room')
        setBlock(block_ele)

        let pwd = $(this).find('.room-pwd').val();
        let name = $(this).find('.room-name').val();
        let datetime = $(this).find('.room-datetime').val();

        let form_data = new FormData();
        form_data.append('name',name);
        form_data.append('password',pwd);
        form_data.append('datetime',datetime);

        $.ajax({
            type: "POST",
            url: "{{route('rooms.store')}}",
            data: form_data,
            dataType: "json",
            contentType: false,
            processData: false,
            success: function (response) {
                if(response.success){
                    let room = response.data.room;
                    let tr = document.createElement('tr');
                    $(tr).addClass('border-bottom')
                    $(tr).attr('id', 'room-row-'+room.id)
                    $(tr).attr('data-room',room.id)
                    let html = `
                        <td>${response.data.nb_room}</td>
                        <td><span class="text-muted">${room.id}</span> </td>
                        <td><span class="text-muted">${room.password??''}</span> </td>
                        <td>${room.datetime}</td>
                        <td><span class="text-muted">${room.name}</span></td>
                        <td>
                            <span class="room-link">${room.share_link}</span>
                            <button class="btn btn-copy-link" title="Copier"><i class="mdi mdi-content-copy"></i></button>
                        </td>
                        <td class="d-flex justify-content-center border-0">
                            <a href="${room.owner_link}" {{-- target="_blank" --}} class="btn btn-outline-success border-success mx-1" title="Rejoindre"><i class="mdi mdi-login-variant"></i></a>
                            <button class="btn btn-outline-info border-info btn-edit-room mx-2" data-toggle="modal" data-target="#modal_room_edit" title="modifier"><i class="fa fa-pencil"></i></button>
                            <button class="btn btn-outline-danger border-danger btn-delete-room mx-1" title="supprimer"><i class="fa fa-trash"></i></button>
                        </td>
                    `;
                    $(tr).html(html)
                    $(tr).find('.btn-delete-room').click(function (e) {
                        e.preventDefault();
                        deleteRoom(room.id,tr)
                    })
                    $(tr).find('.btn-edit-room').click(function (e) {
                        e.preventDefault();
                        fillRoomEditModal(room.id)
                    })

                    $(tr).find('.btn-copy-link').click(copyLinkToClipboard);

                    $('#room-table tbody').prepend(tr)
                    $('#form-add-room').trigger('reset')
                    showAlert('Succès!',response.message,'success');
                    $('#modal_room_add').modal('hide');
                }else{
                    showAlert('Echec!',response.message,'error');
                }
            },
            error: function (jqXHR,textStatus,errorThrown) {
                showAlert("Echec!", errorThrown, 'error');
                console.log(jqXHR)
            },
            complete: function(){
                $(block_ele).unblock();
            }
        });
    });

    $('#form-edit-room').submit(function (e) {
        e.preventDefault();

        let block_ele = $('#form-edit-room')
        setBlock(block_ele)

        let room = $(this).find('.room').val();
        let name = $(this).find('.room-name').val();
        let pwd = $(this).find('.room-pwd').val();
        let datetime = $(this).find('.room-datetime').val();

        let form_data = new FormData();
        form_data.append('_method','PATCH');
        form_data.append('name',name);
        form_data.append('password',pwd);
        form_data.append('datetime',datetime);
        $.ajax({
            type: "POST",
            url: "{{url('rooms')}}/"+room,
            data: form_data,
            dataType: "json",
            contentType: false,
            processData: false,
            success: function (response) {
                if(response.success){
                    room = response.data.room;
                    $('#form-edit-room').find('.room-datetime').val(room.datetime);
                    let tr = $('#room-row-'+room.id);
                    // alert('#room-table tbody tr[data-room-'+room.id+'] td:first')
                    let nb = $(tr).find('td:first').text()
                    let html = `
                        <td>${nb}</td>
                        <td><span class="text-muted">${room.id}</span> </td>
                        <td><span class="text-muted">${room.password??''}</span> </td>
                        <td>${room.datetime_fr}</td>
                        <td><span class="text-muted">${room.name}</span></td>
                        <td>
                            <span class="room-link">${room.share_link}</span>
                            <button class="btn btn-copy-link" title="Copier"><i class="mdi mdi-content-copy"></i></button>
                        </td>
                        <td class="d-flex justify-content-center border-0">
                            <a href="${room.owner_link}" {{-- target="_blank" --}} class="btn btn-outline-success border-success mx-1" title="Rejoindre"><i class="mdi mdi-login-variant"></i></a>
                            <button class="btn btn-outline-info border-info btn-edit-room mx-2" data-toggle="modal" data-target="#modal_room_edit" title="modifier"><i class="fa fa-pencil"></i></button>
                            <button class="btn btn-outline-danger border-danger btn-delete-room mx-1" title="supprimer"><i class="fa fa-trash"></i></button>
                        </td>
                    `;
                    $(tr).html(html)
                    $(tr).find('.btn-delete-room').click(function (e) {
                        e.preventDefault();
                        deleteRoom(room.id,tr)
                    })
                    $(tr).find('.btn-edit-room').click(function (e) {
                        e.preventDefault();
                        fillRoomEditModal(room.id)
                    })

                    $(tr).find('.btn-copy-link').click(copyLinkToClipboard);

                    showAlert("Succès!", response.message, 'success')
                    $("#modal_room_edit").modal("hide");
                }else{
                    showAlert('Echec!',response.message,'error');
                }
            },
            error: function (jqXHR,textStatus,errorThrown) {
                showAlert("Echec!", errorThrown, 'error');
                console.log(jqXHR)
            },
            complete: function(){
                $(block_ele).unblock();
            }
        });
    });

    $('.btn-edit-room').click(function (e) {
        e.preventDefault();
        let room = $(this).closest('tr').attr('data-room');
        fillRoomEditModal(room)
    });

    function fillRoomEditModal(room){
        let block_ele = $('#form-edit-room')
        setBlock(block_ele)
        $.ajax({
            type: "GET",
            url: "{{url('rooms')}}/"+room+"/get",
            // data: form_data,
            dataType: "json",
            contentType: false,
            processData: false,
            success: function (response) {
                if(response.success){
                    $("#form-edit-room").find('.room').val(response.data.room.id);
                    $("#form-edit-room").find('.room-name').val(response.data.room.name);
                    $("#form-edit-room").find('.room-pwd').val(response.data.room.password);
                    $("#form-edit-room").find('.room-datetime').val(response.data.room.datetime);
                    $(block_ele).unblock();
                }else{
                    console.log(response.message)
                }
            },
            error: function (jqXHR,textStatus,errorThrown) {
                console.log(jqXHR)
            }
        });
    }

    function deleteRoom(room,row){
        showConfirmAlert("Suppression","Voulez-vous vraiment supprimer cette réunion?",'Supprimer', function(){
            let block_ele = row
            setBlock(block_ele)
            $.ajax({
                type: "DELETE",
                url: "rooms/"+room,
                // data: form_data,
                dataType: "json",
                contentType: false,
                processData: false,
                success: function (response) {
                    if(response.success){
                        showAlert("Succès!", response.message, 'success')
                        $(row).remove();
                    }else{
                        showAlert('Echec!',response.message,'error');
                    }
                },
                error: function (jqXHR,textStatus,errorThrown) {
                    showAlert("Echec!", errorThrown, 'error');
                    console.log(jqXHR)
                },
                complete: function(){
                    $(block_ele).unblock();
                }
            });
        })
    }

    $('.btn-delete-room').click(function (e) {
        e.preventDefault();
        let btn = $(this);
        let room = btn.closest('tr').attr('data-room');
        let row = btn.closest('tr');
        deleteRoom(room, row);

    });

    $('.btn-copy-link').click(copyLinkToClipboard);

    function copyLinkToClipboard(e) {
        e.preventDefault();

        const share_link = $(this).parents('td').find('.room-link').text();

        navigator.clipboard.writeText(share_link).then(() => {
            /* clipboard successfully set */
            showAlert("", "Lien copié avec succès !", 'success');
        }, () => {
            /* clipboard write failed */
            showAlert("", "Impossible de copier le lien dans le presse papier. Veuillez réessayer svp", 'error');
        });
    }
</script>
@endsection