@extends('both.template')
@section('title', 'PROJETS | OPTIMIA')

@section('styleSheets')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2.min.css') }}">
    <!-- Datetimepicker CSS -->
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-datetimepicker.min.css') }}">
    <!-- Summernote CSS -->
    <link rel="stylesheet" type="text/css" href="{{ asset('plugins/summernote/dist/summernote-bs4-me.css') }}">
@endsection



@section('content')
    <!-- Page Wrapper -->
    <div class="page-wrapper">

        <!-- Page Content -->
        <div class="content container-fluid">

            <!-- Page Header -->
            <div class="page-header">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="page-title">Liste des projets</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">Projets</li>
                            <li class="breadcrumb-item active">Liste des projets</li>
                        </ul>
                    </div>
                    <div class="col-auto float-right ml-auto">
                        <a href="#" class="btn add-btn" data-toggle="modal" data-target="#create_project"><i class="fa fa-plus"></i> Créer un projet</a>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <!-- Search Filter -->
            <!-- <div class="row filter-row">
                <div class="col-sm-6 col-md-3">
                    <div class="form-group form-focus">
                        <input type="text" class="form-control floating">
                        <label class="focus-label">Nom Projet</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="form-group form-focus">
                        <input type="text" class="form-control floating">
                        <label class="focus-label">Nom Employé</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="form-group form-focus select-focus">
                        <select class="select floating">
                            <option>Selectionnez un status</option>
                            @foreach($states as $state)
                                <option value="{{ $state->idProjectState }}">Projet {{ $state->projectStateName }}</option>
                            @endforeach
                        </select>
                        <label class="focus-label">Status des projets</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <a href="#" class="btn btn-success btn-block"> Rechercher </a>
                </div>
            </div> -->
            <!-- Search Filter -->

            <div class="row">
                <script type="text/javascript" src="{{ asset('/js/jquery.countdown.min.js') }}"></script>
                @foreach($projects as $project)
                    <div class="col-lg-4 col-sm-6 col-md-4 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <div class="dropdown dropdown-action profile-action">
                                <a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons"></i></a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#edit_project"><i class="fa fa-pencil m-r-5"></i> Edition</a>
                                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#delete_project"><i class="fa fa-trash-o m-r-5"></i> Suppression</a>
                                </div>
                            </div>
                            <h4 class="project-title"><a href="{{ url('/root/projects/details/'.Str::slug($project->projectName).'/'.$hashids->encode($project->idProjectList).'') }}">{{ $project->projectName }}</a></h4>
                            <small class="block text-ellipsis m-b-15">
                                <span class="text-xs">1</span> <span class="text-muted">open tasks, </span>
                                <span class="text-xs">9</span> <span class="text-muted">tasks completed</span>
                            </small>
                            <p class="text-muted" style="height: 100px; overflow: hidden">
                                {{ strip_tags((Str::limit($project->projectDescription, 100)))  }}
                            </p>

                            <div class="pro-deadline m-b-15">
                                <div class="sub-title text-center">
                                    Deadline : {{ $project->projectDeadLine }}
                                </div>
                                <div class="text-muted text-center" >
                                    <span id="timer-{{ $project->idProjectList }}" style="font-weight: 700; display: block; font-size: 1.5em; color: #2dc3e8" class="">00<sup>J</sup>:00<sup>H</sup>:00<sup>M</sup>:00<sup>S</sup></span>

                                </div>

                                @php
                                    $deadline = explode('/', $project->projectDeadLine) ;
                                @endphp

                                <script type="text/javascript">
                                    $('#timer-{{ $project->idProjectList }}').countdown('{{ $deadline[2].'-'.$deadline[1].'-'.$deadline[0] }}', function(event) {
                                        $(this).html(event.strftime(
                                            '%D<sup>J</sup>:%H<sup>H</sup>:%M<sup>M</sup>:%S<sup>S</sup>'
                                        ));
                                    });
                                </script>
                            </div>
                            {{-- <div class="project-members text-center">
                                <div style="display: inline-block; margin-right: 10px">
                                    <div style="font-size: 0.8em; font-weight: 700">Lead</div>
                                    <ul class="team-members">
                                        <li>
                                            <a href="#" data-toggle="tooltip" title="Jeffery Lalor" style="width: 50px; height: 50px;">
                                                <img alt="" src="{{ asset('img/profiles/avatar-16.jpg') }}" style="width: 50px; height: 50px;">
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <div style="display: inline-block">
                                    <div>Equipe</div>
                                    <ul class="team-members">
                                        <li>
                                            <a href="#" data-toggle="tooltip" title="John Doe"><img alt="" src="{{ asset('img/profiles/avatar-02.jpg') }}"></a>
                                        </li>
                                        <li>
                                            <a href="#" data-toggle="tooltip" title="John Doe"><img alt="" src="{{ asset('img/profiles/avatar-02.jpg') }}"></a>
                                        </li>

                                        <li class="dropdown avatar-dropdown">
                                            <a href="#" class="all-users dropdown-toggle" data-toggle="dropdown" aria-expanded="false">+15</a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <div class="avatar-group">
                                                    <a class="avatar avatar-xs" href="#">
                                                        <img alt="" src="assets/img/profiles/avatar-02.jpg">
                                                    </a>
                                                    <a class="avatar avatar-xs" href="#">
                                                        <img alt="" src="assets/img/profiles/avatar-09.jpg">
                                                    </a>
                                                    <a class="avatar avatar-xs" href="#">
                                                        <img alt="" src="assets/img/profiles/avatar-10.jpg">
                                                    </a>
                                                    <a class="avatar avatar-xs" href="#">
                                                        <img alt="" src="assets/img/profiles/avatar-05.jpg">
                                                    </a>
                                                    <a class="avatar avatar-xs" href="#">
                                                        <img alt="" src="assets/img/profiles/avatar-11.jpg">
                                                    </a>
                                                    <a class="avatar avatar-xs" href="#">
                                                        <img alt="" src="assets/img/profiles/avatar-12.jpg">
                                                    </a>
                                                    <a class="avatar avatar-xs" href="#">
                                                        <img alt="" src="assets/img/profiles/avatar-13.jpg">
                                                    </a>
                                                    <a class="avatar avatar-xs" href="#">
                                                        <img alt="" src="assets/img/profiles/avatar-01.jpg">
                                                    </a>
                                                    <a class="avatar avatar-xs" href="#">
                                                        <img alt="" src="assets/img/profiles/avatar-16.jpg">
                                                    </a>
                                                </div>
                                                <div class="avatar-pagination">
                                                    <ul class="pagination">
                                                        <li class="page-item">
                                                            <a class="page-link" href="#" aria-label="Previous">
                                                                <span aria-hidden="true">«</span>
                                                                <span class="sr-only">Previous</span>
                                                            </a>
                                                        </li>
                                                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                                                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                                                        <li class="page-item">
                                                            <a class="page-link" href="#" aria-label="Next">
                                                                <span aria-hidden="true">»</span>
                                                                <span class="sr-only">Next</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div> --}}
                            {{-- <p class="m-b-5">Progression <span class="text-success float-right">40%</span></p>
                            <div class="progress progress-xs mb-0">
                                <div class="progress-bar bg-success" role="progressbar" data-toggle="tooltip" title="40%" style="width: 40%"></div>
                            </div> --}}
                        </div>
                    </div>
                </div>
                @endforeach
            </div>


        </div>
        <!-- /Page Content -->

        <!-- Create Project Modal -->
        <div id="create_project" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Création d'un projet</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" onsubmit="return false" autocomplete="off" enctype="multipart/form-data" id="projectAddingForm">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="projectName">Nom du projet</label>
                                        <input class="form-control" type="text" id="projectName" name="projectName">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="idClient">Clients</label>
                                        <select class="select" id="idClient" name="idClient">
                                            <option selected disabled>Sélectionnez un client</option>
                                            <optgroup label="Projets Externes">
                                                @foreach($clients as $client)
                                                    @if (!Str::contains($client->clientFullName, 'Synergie') && !Str::contains($client->clientFullName, 'Logex') )
                                                        <option value="{{ $client->idClient }}">
                                                            {{ $client->clientFullName }} ( {{ $client->societyName }} )
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </optgroup>

                                            <optgroup label="Projets Internes">
                                                @foreach($clients as $client)
                                                    @if (Str::contains($client->clientFullName, 'Synergie') || Str::contains($client->clientFullName, 'Logex') )
                                                        <option value="{{ $client->idClient }}">
                                                            {{ $client->clientFullName }} ( {{ $client->societyName }} )
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </optgroup>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="projectBornLine">Bornline Projet</label>
                                        <div class="cal-icon">
                                            <input class="form-control datetimepicker" type="text" id="projectBornLine" name="projectBornLine">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="projectDeadLine">Deadline Projet</label>
                                        <div class="cal-icon">
                                            <input class="form-control datetimepicker" type="text" id="projectDeadLine" name="projectDeadLine">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="projectCost">Coût du projet</label>
                                        <input class="form-control" type="number" id="projectCost" name="projectCost">
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="idProjectState">Status du projet</label>
                                        <select class="select" id="idProjectState" name="idProjectState">
                                            <option>Sélectionnez le status du projet</option>
                                            @foreach($states as $state)
                                                <option value="{{ $state->idProjectState }}">{{ $state->projectStateName }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="projectDescription">Description</label>
                                <textarea rows="4" class="form-control summernote" id="projectDescription" name="projectDescription"></textarea>
                            </div>
                            <div class="form-group text-center align-content-center">
                                <label for="projectFiles" style="cursor: pointer;" >
                                    <i class="fa fa-archive" style="font-size: 3.5em;"></i>
                                </label>
                                <h6>Fichiers Projets (Facultatif)</h6>
                                <h6 id="fileQty" style="color: grey; font-weight: normal">0 Fichiers Sélectionné</h6>
                                <input class="form-control" type="file" id="projectFiles" multiple name="projectFiles[]" style="display: none; z-index: -9999; position:absolute; visibility: hidden; opacity: 0;">
                            </div>
                            <div class="submit-section" style="margin-top: -5px">
                                <button class="btn btn-primary submit-btn" onclick="submitProjectStoring()">Créer</button>
                            </div>

                            {{ csrf_field() }}
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Create Project Modal -->

        <!-- Edit Project Modal -->
        <div id="edit_project" class="modal custom-modal fade" role="dialog">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Project</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Project Name</label>
                                        <input class="form-control" value="Project Management" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Client</label>
                                        <select class="select">
                                            <option>Global Technologies</option>
                                            <option>Delta Infotech</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Start Date</label>
                                        <div class="cal-icon">
                                            <input class="form-control datetimepicker" type="text">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>End Date</label>
                                        <div class="cal-icon">
                                            <input class="form-control datetimepicker" type="text">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Rate</label>
                                        <input placeholder="$50" class="form-control" value="$5000" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>&nbsp;</label>
                                        <select class="select">
                                            <option>Hourly</option>
                                            <option selected>Fixed</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Priority</label>
                                        <select class="select">
                                            <option selected>High</option>
                                            <option>Medium</option>
                                            <option>Low</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Add Project Leader</label>
                                        <input class="form-control" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Team Leader</label>
                                        <div class="project-members">
                                            <a href="#" data-toggle="tooltip" title="Jeffery Lalor" class="avatar">
                                                <img src="assets/img/profiles/avatar-16.jpg" alt="">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Add Team</label>
                                        <input class="form-control" type="text">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Team Members</label>
                                        <div class="project-members">
                                            <a href="#" data-toggle="tooltip" title="John Doe" class="avatar">
                                                <img src="assets/img/profiles/avatar-16.jpg" alt="">
                                            </a>
                                            <a href="#" data-toggle="tooltip" title="Richard Miles" class="avatar">
                                                <img src="assets/img/profiles/avatar-09.jpg" alt="">
                                            </a>
                                            <a href="#" data-toggle="tooltip" title="John Smith" class="avatar">
                                                <img src="assets/img/profiles/avatar-10.jpg" alt="">
                                            </a>
                                            <a href="#" data-toggle="tooltip" title="Mike Litorus" class="avatar">
                                                <img src="assets/img/profiles/avatar-05.jpg" alt="">
                                            </a>
                                            <span class="all-team">+2</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Description</label>
                                <textarea rows="4" class="form-control" placeholder="Enter your message here"></textarea>
                            </div>
                            <div class="form-group">
                                <label>Upload Files</label>
                                <input class="form-control" type="file">
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Edit Project Modal -->

        <!-- Delete Project Modal -->
        <div class="modal custom-modal fade" id="delete_project" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-header">
                            <h3>Delete Project</h3>
                            <p>Are you sure want to delete?</p>
                        </div>
                        <div class="modal-btn delete-action">
                            <div class="row">
                                <div class="col-6">
                                    <a href="javascript:void(0);" class="btn btn-primary continue-btn">Delete</a>
                                </div>
                                <div class="col-6">
                                    <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Delete Project Modal -->

    </div>
    <!-- /Page Wrapper -->
@endsection

@section('scriptsSheets')
    <script src="{{ asset('js/select2.min.js') }}"></script>
    <!-- Datetimepicker JS -->
    <script src="{{ asset('js/moment.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap-datetimepicker.min.js') }}"></script>
    <!-- Summernote JS -->
    <script src="{{ asset('plugins/summernote/dist/summernote-bs4.min.js') }}"></script>

    <script type="text/javascript">

        let projectFiles = $('#projectFiles');
        projectFiles.on('change', function(){
            let qty = projectFiles.get(0).files.length;
            $('#fileQty').text(qty + ' Fichier' + (qty > 1 ? 's':'') + ' Sélectionné');
        });

        function submitProjectStoring(){

            let idClient = $('#idClient');
            let idProjectState = $('#idProjectState');
            let projectName = $('#projectName');
            let projectDesciption = $('#projectDescription');
            let projectBornLine = $('#projectBornLine');
            let projectDeadLine = $('#projectDeadLine');
            let projectCost = $('#projectCost');

            if(projectName.val().length > 3) {
                if ($.isNumeric(idClient.val())) {
                    if(projectBornLine.val().length === 10){
                        if(projectDeadLine.val().length === 10){
                            if($.isNumeric(projectCost.val())){
                                if ($.isNumeric(idProjectState.val())){
                                    if (projectDesciption.val().length > 3){
                                        if (projectFiles.get(0).files.length < 11) {
                                            let form = $('#projectAddingForm')[0];
                                            let data = new FormData(form);
                                            //AJAX REQUEST
                                            $.ajax({
                                                type: 'POST',
                                                enctype: 'multipart/form-data',
                                                url: '{{ route("root-storeProject") }}',
                                                data: data,
                                                processData: false,  // Important!
                                                contentType: false,
                                                cache: false,
                                                timeout: 600000,

                                                success: function (result) {
                                                    if (result === '1') {
                                                        swalWithBootstrapButtons.fire({
                                                            title: 'Good Job',
                                                            text: 'Projet ajouté avec succès !',
                                                            type: 'success',
                                                            showConfirmButton: true,
                                                            confirmButtonText: 'Super'
                                                        }).then((action) => {
                                                            window.location.reload();
                                                        });
                                                    } else if (result === '-1') {
                                                        swalWithBootstrapButtons.fire({
                                                            title: 'Oops',
                                                            text: 'Projet existant dans la base',
                                                            type: 'warning',
                                                            showCancelButton: true,
                                                            showConfirmButton: false,
                                                            cancelButtonText: 'D\'accord'
                                                        })
                                                    } else {
                                                        console.log(result);
                                                        swalWithBootstrapButtons.fire({
                                                            title: 'Oops',
                                                            text: 'Echec de l\'opération',
                                                            type: 'error',
                                                            showCancelButton: true,
                                                            showConfirmButton: false,
                                                            cancelButtonText: 'Hummmm'
                                                        })
                                                    }
                                                },

                                                error: function (error) {
                                                    console.log(error);
                                                    swalWithBootstrapButtons.fire({
                                                        title: 'Oops',
                                                        text: 'Echec de l\'opération',
                                                        type: 'error',
                                                        showCancelButton: true,
                                                        showConfirmButton: false,
                                                        cancelButtonText: 'Hummmm'
                                                    })
                                                }
                                            });
                                        } else{
                                            swalWithBootstrapButtons.fire({
                                                title: 'Oops',
                                                text: 'Excès du nombre maximum de fichiers projet (max 10) !',
                                                type: 'error',
                                                showCancelButton: true,
                                                showConfirmButton: false,
                                                cancelButtonText: 'D\'accord'
                                            });
                                        }
                                    } else{
                                        swalWithBootstrapButtons.fire({
                                            title: 'Oops',
                                            text: 'Description projet invalide !',
                                            type: 'error',
                                            showCancelButton: true,
                                            showConfirmButton: false,
                                            cancelButtonText: 'D\'accord'
                                        })
                                    }
                                } else{
                                    swalWithBootstrapButtons.fire({
                                        title: 'Oops',
                                        text: 'Veuillez sélectionner un status pour le projet !',
                                        type: 'error',
                                        showCancelButton: true,
                                        showConfirmButton: false,
                                        cancelButtonText: 'D\'accord'
                                    })
                                }
                            } else{
                                swalWithBootstrapButtons.fire({
                                    title: 'Oops',
                                    text: 'Coût du projet invalide !',
                                    type: 'error',
                                    showCancelButton: true,
                                    showConfirmButton: false,
                                    cancelButtonText: 'D\'accord'
                                })
                            }
                        } else{
                            swalWithBootstrapButtons.fire({
                                title: 'Oops',
                                text: 'Date fin du projet invalide !',
                                type: 'error',
                                showCancelButton: true,
                                showConfirmButton: false,
                                cancelButtonText: 'D\'accord'
                            })
                        }
                    } else{
                        swalWithBootstrapButtons.fire({
                            title: 'Oops',
                            text: 'Date début du projet invalide !',
                            type: 'error',
                            showCancelButton: true,
                            showConfirmButton: false,
                            cancelButtonText: 'D\'accord'
                        })
                    }
                } else {
                    swalWithBootstrapButtons.fire({
                        title: 'Oops',
                        text: 'Veuillez sélectionner un  !',
                        type: 'error',
                        showCancelButton: true,
                        showConfirmButton: false,
                        cancelButtonText: 'D\'accord'
                    })
                }
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'Le nom du projet est trop court !',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }
    </script>
@endsection