@extends('layouts.base-project')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{asset('assets/libs/select2/dist/css/select2.min.css')}}">
    <!-- Custom CSS -->
    <link href="{{asset('assets/extra-libs/toastr/dist/build/toastr.min.css')}}" rel="stylesheet">
    <style>
        /* body .card {
            --background: #ffffff;
            --text: black;
            position: relative;
            height: 6rem;
            box-shadow: 0 0 2rem -1rem rgba(0, 0, 0, 0.05);
        }
        body .card .multi-button {
            z-index: 0;
            position: absolute;
            top: 1.25rem;
            left: 1.25rem;
            border-radius: 100%;
            width: 0rem;
            height: 0rem;
            transform: translate(-50%, -50%);
            transition: 0.25s cubic-bezier(0.25, 0, 0, 1);
        }
        body .card .multi-button button {
            display: grid;
            place-items: center;
            position: absolute;
            width: 2rem;
            height: 2rem;
            border: none;
            border-radius: 100%;
            background: var(--background);
            color: var(--text);
            transform: translate(-50%, -50%);
            cursor: pointer;
            transition: 0.25s cubic-bezier(0.25, 0, 0, 1);
            box-shadow: 0 0 0rem -0.25rem var(--background);
        }
        body .card .multi-button button:hover {
            background: var(--text);
            color: var(--background);
            box-shadow: 0 0 1rem -0.25rem var(--background);
        } */

        /* body .card .multi-button button:first-child:nth-last-child(1):nth-child(1), body .card .multi-button button:first-child:nth-last-child(1) ~ *:nth-child(1) {
        left: 25%;
        top: 25%;
        }
        body .card .multi-button button:first-child:nth-last-child(2):nth-child(1), body .card .multi-button button:first-child:nth-last-child(2) ~ *:nth-child(1) {
        left: 37.5%;
        top: 18.75%;
        }
        body .card .multi-button button:first-child:nth-last-child(2):nth-child(2), body .card .multi-button button:first-child:nth-last-child(2) ~ *:nth-child(2) {
        left: 18.75%;
        top: 37.5%;
        }
        body .card .multi-button button:first-child:nth-last-child(3):nth-child(1), body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(1) {
        left: 50%;
        top: 15.625%;
        }
        body .card .multi-button button:first-child:nth-last-child(3):nth-child(2), body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(2) {
        left: 25%;
        top: 25%;
        }
        body .card .multi-button button:first-child:nth-last-child(3):nth-child(3), body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(3) {
        left: 15.625%;
        top: 50%;
        }
        body .card .multi-button button:first-child:nth-last-child(4):nth-child(1), body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(1) {
        left: 62.5%;
        top: 18.75%;
        }
        body .card .multi-button button:first-child:nth-last-child(4):nth-child(2), body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(2) {
        left: 37.5%;
        top: 18.75%;
        }
        body .card .multi-button button:first-child:nth-last-child(4):nth-child(3), body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(3) {
        left: 18.75%;
        top: 37.5%;
        }
        body .card .multi-button button:first-child:nth-last-child(4):nth-child(4), body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(4) {
        left: 18.75%;
        top: 62.5%;
        } */
        /* body .card .container {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 1rem;
        background-image: url('/assets/images/img1.jpg');
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: cover;
        color: white;
        } */

        /* body .card:hover .multi-button,
        body .card .multi-button:focus-within {
        width: 10rem;
        height: 10rem;
        } */

    </style>

@endsection

@section('under-header')

        <div class="page-wrapper">
            <!-- ============================================================== -->
            <!-- Bread crumb and right sidebar toggle -->
            <!-- ============================================================== -->
            <div class="page-breadcrumb border-bottom">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-xs-12 align-self-center">
                        <h5 class="font-medium text-uppercase mb-0">Dashboard</h5>
                    </div>
                    <div class="col-lg-9 col-md-8 col-xs-12 align-self-center">
                        <!--button class="btn btn-danger text-white float-right ml-3 d-none d-md-block">Buy Ample Admin</button-->
                        <nav aria-label="breadcrumb" class="mt-2 float-md-right float-left">
                            <ol class="breadcrumb mb-0 justify-content-end p-0">
                                <li class="breadcrumb-item"><a href="#">Projets</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- ============================================================== -->
            <!-- End Container fluid  -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- footer -->
            <!-- ============================================================== -->

@endsection

@section('content')
<div  class="page-content container-fluid">
    <div class="row">

        <div class="col-lg-3 col-md-6">
            <div class="card border-bottom border-cyan">
                <div class="card-body">
                    <div class="d-flex no-block align-items-center">
                        <div class="ml-auto">
                            <span class="text-cyan display-6"><i class="ti-clipboard"></i></span>
                        </div>
                        <div class="ml-auto">
                            <h2>{{ $myProjects->count() }}</h2>
                            <h5 class="text-cyan">Mes projets personnels</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-6">
            <div class="card border-bottom border-success">
                <div class="card-body">
                    <div class="d-flex no-block align-items-center">
                        <div class="ml-auto">
                            <span class="text-success display-6"><i class="ti-layout-media-left-alt"></i></span>
                        </div>
                        <div class="ml-auto">
                            <h2>{{ $projects->count() }}</h2>
                            <h5 class="text-success">Mes projets associés</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- <div class="col-sm-12">
            <div style="margin-top: 30px; height:70px; background-color:white; color:black" class="card">
                <div  class="card-body">
                    <h3 class="card-title" style="text-transform:uppercase;">Projets </h3>
                </div>
            </div>
        </div> --}}
    </div>

    <div class="row">
        <div class="col-6">
            <ul class="navbar-nav float-left w-100">
                <!-- ============================================================== -->
                <!-- Search -->
                <!-- ============================================================== -->
                <li  class="nav-item search-box">
                    <form class="app-search">
                        <input id="listSearch" type="text" class="form-control w-100 p-4 shadow-lg border" placeholder="Rechercher...">
                        {{-- <a href="" class="active"><i class="fa fa-search"></i></a> --}}
                    </form>
                </li>
            </ul>
        </div>
        <div class="col-6">
            <button
                type="button"
                data-toggle="modal"
                data-target="#create"
                class="btn btn-info text-white float-right ml-3 d-none d-md-block"
                href=""
            >
                Créer un projet
            </button>
            <div class="modal" id="create">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"> Créer projet</h4>
                        </div>
                        <div class="modal-body">

                                <form class="mt-4" method="POST" action="{{route('project_store')}}" onsubmit="toast()">
                                    @csrf
                                    <div class="form-group">
                                        <label for="name" class="control-label">Nom du projet:</label>
                                        <input type="text" required id="name" name="name" class="form-control" placeholder="Nom du projet">
                                    </div>
                                    <div class="form-group">
                                        <label for="description" class="control-label">Description :</label>
                                        <textarea type="text" required id="description" name="description" class="form-control" placeholder="Description" rows="5"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="date" class="control-label">Date de début:</label>
                                        <input type="datetime-local" name="start_date" class="form-control" id="date">
                                    </div>
                                    <div class="form-group">
                                        <label for="datel" class="control-label">Date limite:</label>
                                        <input type="datetime-local" name="end_date" class="form-control" id="datel">
                                    </div>
                                    <!-- <div class="form-group">
                                        <label for="equipes" class="control-label">Equipes:</label>
                                        <select class="select2 form-control block" required id="equipes" name="equipes[]" multiple="multiple" style="width:50%">
                                            {{-- @foreach($equipes as $equipe) --}}
                                        {{-- <option value="{{$equipe->id}}">{{$equipe->title}}</option> --}}
                                            {{-- @endforeach --}}
                                        </select>
                                    </div> -->
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                                        <button type="submit" class="btn btn-success waves-effect waves-light" >Créer</button>
                                    </div>
                                </form>

                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="my-5">
        <h3 class="display-6 text-white bg-info shadow-sm p-4">Mes Projets personnels</h3>
        <div id="myProjects" class="row mt-3">
            @if ($myProjects->count() > 0)
                <!-- Column -->
                @foreach ($myProjects as $myProject)
                    <div class="col-12 col-md-6 col-lg-4 my-2">
                        <div class="card border-info" style="height: 100%;">
                            <div class="card-header bg-info">
                                <h4
                                    title="{{ $myProject->name }}"
                                    class="mb-0 text-white text-truncate"
                                >
                                    {{ $myProject->name }}
                                </h4>
                            </div>
                            <div class="card-body d-flex flex-column justify-content-between">
                                <div>
                                    <h3 class="card-title">
                                        {{ $myProject->description }}
                                    </h3>
                                    <div class="d-flex justify-content-between">
                                        <p class="card-text">
                                            Créé le {{ $myProject->getDate(explode(' ', $myProject->created_at)[0]) }}
                                        </p>
                                        <p>
                                            @if ($myProject->activities->count() > 1)
                                                {{ $myProject->activities->count() }} activités
                                            @elseif ($myProject->activities->count() == 1)
                                                {{ $myProject->activities->count() }} activité
                                            @else
                                                Aucune activité
                                            @endif
                                        </p>
                                    </div>
                                </div>

                                <div class="d-flex">
                                    <a
                                        href="{{route('project', ['id' => $myProject->id])}}"
                                        class="btn btn-inverse mx-1"
                                    >
                                        Voir le projet
                                    </a>
                                    <button
                                        type="button"
                                        title="Modifier"
                                        data-toggle="modal"
                                        data-target="#modal_modifier{{ $myProject->id }}"
                                        {{-- href="{{ route('project_update', ['project_id' => $myProject->id]) }}" --}}
                                        class="btn waves-effect waves-light btn-outline-warning mx-1"
                                    >
                                        Modifier
                                    </button>
                                    <button
                                        type="button"
                                        title="Supprimer"
                                        data-toggle="modal"
                                        data-target="#modal_Supprimer{{ $myProject->id }}"
                                        class="btn waves-effect waves-light btn-outline-danger mx-1"
                                    >
                                        <!-- <i class="ti-trash"></i> -->
                                        Supprimer
                                    </button>
                                </div>

                                <div class="modal" id="modal_modifier{{ $myProject->id }}">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title"> Modifier votre projet</h4>
                                            </div>
                                            <div class="modal-body">

                                                    <form
                                                        class="mt-4"
                                                        method="POST"
                                                        action="{{ route('project_update') }}"
                                                        enctype="multipart/form-data"
                                                        onsubmit="toast_update()"
                                                        id="{{ 'modal-update-'. $myProject->id }}"
                                                    >
                                                        @csrf
                                                        @method('PATCH')
                                                        <div class="form-group">
                                                            <input type="hidden" name="project_id" value="{{ $myProject->id }}" />
                                                            <label for="name" class="control-label">Nom du projet:</label>
                                                            <input
                                                                type="text"
                                                                required
                                                                id="name"
                                                                name="name"
                                                                value="{{ $myProject->name }}"
                                                                class="form-control"
                                                                placeholder="Nom du projet"
                                                            >
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="description" class="control-label">Description :</label>
                                                            <textarea
                                                                type="text"
                                                                required
                                                                id="description"
                                                                name="description"
                                                                class="form-control"
                                                                placeholder="Description"
                                                                rows="5"
                                                            >{{ $myProject->description }}</textarea>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="date" class="control-label">Date de début:</label>
                                                            <input
                                                                type="datetime-local"
                                                                name="start_date"
                                                                value="{{ $myProject->start_date }}"
                                                                class="form-control"
                                                                id="date"
                                                            >
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="datel" class="control-label">Date limite:</label>
                                                            <input
                                                                type="datetime-local"
                                                                name="end_date"
                                                                value="{{ $myProject->end_date }}"
                                                                class="form-control"
                                                                id="datel"
                                                            >
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                                                            <button type="submit" class="btn btn-success waves-effect waves-light" >Modifier</button>
                                                        </div>
                                                    </form>

                                            </div>

                                        </div>
                                    </div>

                                </div>
                                <div class="modal" id="modal_Supprimer{{ $myProject->id }}" style="color:rgb(32,0,32);">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <!-- Modal Header -->
                                            <div class="modal-header" >
                                                <h2 class="modal-title"> Suppression du Projet : {{ $myProject->name }}</h2>
                                            </div>
                                            <!-- Modal body -->
                                            <div class="modal-body">
                                                Etes-vous sûr de vouloir supprimer ce projet?
                                                <form class="mt-4" method="post" action="{{ route('project_destroy',['project_id' => $myProject->id]) }}">
                                                    {{ csrf_field() }}
                                                    {{ method_field('DELETE') }}
                                                    <!-- Modal footer -->
                                                    <div class="modal-footer" style="margin-top: 5px; text-align:left;">
                                                    <button type="submit" class="btn btn-danger">Supprimer</button>
                                                    <button type="button" class="btn btn-success" data-dismiss="modal">Annuler</button>
                                                    </div>
                                                </form>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                <!-- Column -->
            @else
                <div class="h4 m-4">Aucun projet personnel créé</div>
            @endif
        </div>
    </div>

    <hr>

    <div class="my-5">
        <h3 class="display-6 text-white bg-success shadow-sm p-4">Projets auxquelles je suis associé</h3>
        <div id="projects" class="row mt-3">
            @if ($projects->count() > 0)
                <!-- Column -->
                @foreach ($projects as $project)
                    <div class="col-12 col-md-6 col-lg-4 my-2">
                        <div class="card border-success" style="height: 100%;">
                            <div class="card-header bg-success">
                                <h4 title="{{ $project->name }}" class="mb-0 text-white text-truncate">{{ $project->name }}</h4>
                            </div>
                            <div class="card-body d-flex flex-column justify-content-between">
                                <div>
                                    <h3 class="card-title">{{ $project->description }}</h3>
                                    <div class="d-flex justify-content-between">
                                        <p class="card-text">Créé le {{ $project->getDate(explode(' ', $project->created_at)[0]) }}</p>
                                        <p>
                                            @if ($project->activities->count() > 1)
                                                {{ $project->activities->count() }} activités
                                            @elseif ($project->activities->count() == 1)
                                                {{ $project->activities->count() }} activité
                                            @else
                                                Aucune activité
                                            @endif
                                        </p>
                                    </div>
                                </div>
                                <a href="{{route('project', ['id' => $project->id])}}" class="btn btn-inverse">Voir le projet</a>
                            </div>
                        </div>
                    </div>
                @endforeach
                <!-- Column -->
            @else
                <div class="h4 m-4">Vous n'êtes associé à aucun projet</div>
            @endif
        </div>
    </div>

    {{-- <div class="row d-flex justify-content-center">{{ $projets->links() }}</div> --}}
</div>
@endsection

@section('script')
    <script src="{{asset('assets/libs/select2/dist/js/select2.full.min.js')}}"></script>
    <script src="{{asset('assets/libs/select2/dist/js/select2.min.js')}}"></script>
    <script src="{{asset('dist/js/pages/forms/select2/select2.init.js')}}"></script>
    <script src="{{asset('assets/extra-libs/toastr/dist/build/toastr.min.js')}}"></script>
    <script src="{{asset('assets/extra-libs/toastr/toastr-init.js')}}"></script>
    <script src="{{asset('dist/js/custom.min.js')}}"></script>

    <script>
        function toast() {
            toastr.success('Projet créé avec succès.', 'Création du projet', {"showMethod": "fadeIn", "hideMethod": "fadeOut", timeOut: 2000})
        }
        function toast_update() {
            toastr.success('Projet mis à jour avec succès.', 'Mise à jour du projet', {"showMethod": "fadeIn", "hideMethod": "fadeOut", timeOut: 2000})
        }
    </script>

    <script>

    // if (@json(session()->has('success'), JSON_PRETTY_PRINT)) {
    //     if(@json(session('success'), JSON_PRETTY_PRINT)){
    //         toastr.success("{{session('message')}}", 'Connexion', {"showMethod": "fadeIn", "hideMethod": "fadeOut", timeOut: 5000})
    //     }
    //     if(!@json(session('success'), JSON_PRETTY_PRINT)){
    //         toastr.error("{{session('message')}}", 'Connexion', {"showMethod": "fadeIn", "hideMethod": "fadeOut", timeOut: 5000})
    //     }
    // }

        if(@json(session('statut'), JSON_PRETTY_PRINT)){
            toastr.success('{{session('statut')}}', 'Modification', {"showMethod": "fadeIn", "hideMethod": "fadeOut", timeOut: 5000})
        }
        if(@json($errors->any(), JSON_PRETTY_PRINT)){
            toastr.error('{{$errors->first()}}', 'Modification', {"showMethod": "fadeIn", "hideMethod": "fadeOut", timeOut: 5000})
        }

    </script>

    <script>
        //Filter list

        $(document).ready(function(){
            $("#listSearch").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#myProjects div div div h4").filter(function() {
                    $(this).parent().parent().parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
                $("#projects div div div h4").filter(function() {
                    $(this).parent().parent().parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });
        });

    </script>

@endsection