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

@section('styleSheets')
    <link rel="stylesheet" type="text/css" href="{{ URL::to('css/dataTables.bootstrap4.min.css') }}">
    <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') }}">
@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">Billets</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url('/root/') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Billets</li>
                        </ul>
                    </div>
                    <div class="col-auto float-right ml-auto">
                        <a href="#" class="btn add-btn" data-toggle="modal" data-target="#add_ticket"><i class="fa fa-plus"></i> Ajouter un billet</a>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <div class="row">
                <div class="col-md-12">
                    <div class="card-group m-b-30">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between mb-3">
                                    <div>
                                        <span class="d-block">Billet de la semaine</span>
                                    </div>
                                    <div>
                                        <span class="text-success">+10%</span>
                                    </div>
                                </div>
                                <h3 class="mb-3">112</h3>
                                <div class="progress mb-2" style="height: 5px;">
                                    <div class="progress-bar bg-primary" role="progressbar" style="width: 70%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between mb-3">
                                    <div>
                                        <span class="d-block">Billets approuvés</span>
                                    </div>
                                    <div>
                                        <span class="text-success">+12.5%</span>
                                    </div>
                                </div>
                                <h3 class="mb-3">70</h3>
                                <div class="progress mb-2" style="height: 5px;">
                                    <div class="progress-bar bg-primary" role="progressbar" style="width: 70%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between mb-3">
                                    <div>
                                        <span class="d-block">Billets rejettés</span>
                                    </div>
                                    <div>
                                        <span class="text-danger">-2.8%</span>
                                    </div>
                                </div>
                                <h3 class="mb-3">100</h3>
                                <div class="progress mb-2" style="height: 5px;">
                                    <div class="progress-bar bg-primary" role="progressbar" style="width: 70%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between mb-3">
                                    <div>
                                        <span class="d-block">Billets en attente</span>
                                    </div>
                                    <div>
                                        <span class="text-danger">-75%</span>
                                    </div>
                                </div>
                                <h3 class="mb-3">125</h3>
                                <div class="progress mb-2" style="height: 5px;">
                                    <div class="progress-bar bg-primary" role="progressbar" style="width: 70%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Search Filter -->
            <div class="row filter-row">
                <div class="col-sm-6 col-md-4 col-lg-4 col-xl-4 col-12">
                    <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 col-lg-3 col-xl-2 col-12">
                    <div class="form-group form-focus select-focus">
                        <select class="select floating">
                            <option> -- Selectionnez -- </option>
                            <option> En attente </option>
                            <option> Approuvé </option>
                            <option> Rejetté </option>
                        </select>
                        <label class="focus-label">Status du billet</label>
                    </div>
                </div>

                <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">
                    <div class="form-group form-focus">
                        <div class="cal-icon">
                            <input class="form-control floating datetimepicker" type="text">
                        </div>
                        <label class="focus-label">Du</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">
                    <div class="form-group form-focus">
                        <div class="cal-icon">
                            <input class="form-control floating datetimepicker" type="text">
                        </div>
                        <label class="focus-label">Au</label>
                    </div>
                </div>
                <div class="col-sm-6 col-md-3 col-lg-3 col-xl-2 col-12">
                    <a href="#" class="btn btn-success btn-block"> Rechercher </a>
                </div>
            </div>
            <!-- /Search Filter -->

            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-striped custom-table mb-0 datatable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Code Billet</th>
                                    <th>Employé</th>
                                    <th>Raison </th>
                                    <th>Montant</th>
                                    <th>Date</th>
                                    <th class="text-center">Status</th>
                                    <th class="text-right">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $colors = [
                                        'En attente' => 'info',
                                        'Approuvé' => 'success',
                                        'Rejetté' => 'danger'
                                    ];
                                    $i = 1;
                                @endphp
                                @foreach($tickets as $ticket)

                                    <tr>
                                        <td>{{ $i }}</td>
                                        <td>{{ $ticket->ticketCode }}</td>
                                        <td>
                                            <h2 class="table-avatar">
                                                <a class="avatar avatar-xs" href="#"><img alt="" src="{{ asset('/storage/usersProfiles/'.$ticket->employerProfile )}}"></a>
                                                <a href="#">{{ $ticket->employeeFirstname.' '.$ticket->employeeLastname }}</a>
                                            </h2>
                                        </td>
                                        <td>{{ $ticket->ticketName }}</td>
                                        <td>
                                            <strong>
                                                <script type="text/javascript">
                                                    document.write(
                                                        new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format('{{ $ticket->ticketCost }}')
                                                    );
                                                </script>
                                            </strong>
                                        </td>
                                        <td>{{ App\Utils\Utils::getDBDateFormat($ticket->ticketDate, true)}}</td>
                                        <td class="text-center">
                                            <div class="dropdown action-label">
                                                <a class="btn btn-white btn-sm btn-rounded dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
                                                    <i class="fa fa-dot-circle-o text-{{ $colors[$ticket->isApprouved] }}"></i> {{ $ticket->isApprouved }}
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#"><i class="fa fa-dot-circle-o text-info"></i> En attente</a>
                                                    <a class="dropdown-item" href="#"><i class="fa fa-dot-circle-o text-success"></i> Approuvé</a>
                                                    <a class="dropdown-item" href="#"><i class="fa fa-dot-circle-o text-danger"></i> Rejetté</a>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-right">
                                            <div class="dropdown dropdown-action">
                                                <a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="material-icons">more_vert</i></a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#edit_ticket"><i class="fa fa-pencil m-r-5"></i> Editer</a>
                                                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#delete_ticket"><i class="fa fa-trash-o m-r-5"></i> Supprimer</a>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @php $i++; @endphp
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Page Content -->

        <!-- Add Ticket Modal -->
        <div id="add_ticket" 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">Ajout d'un billet</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 onsubmit="return false" autocomplete="off" method="post">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label for="idUser">Employé</label>
                                        <select class="select" id="idUser">
                                            <option>-</option>
                                            @foreach($employees as $employee)
                                                <option value="{{ $hashids->encode($employee->idEmployee) }}">{{ $employee->employeeFirstname.' '.$employee->employeeLastname }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label for="ticketCost">Montant du billet</label>
                                        <input class="form-control" type="number" id="ticketCost">
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label for="ticketDate">Date de sortie du billet</label>
                                        <div class="cal-icon"><input class="form-control datetimepicker" type="text" id="ticketDate"></div>
                                    </div>
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="ticketName">Raison du billet</label>
                                        <textarea class="form-control" id="ticketName"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn" onclick="submitTicketStoring()">Ajouter</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Add Ticket Modal -->

        <!-- Edit Ticket Modal -->
        <div id="edit_ticket" 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 Ticket</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>Ticket Subject</label>
                                        <input class="form-control" type="text" value="Laptop Issue">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Ticket Id</label>
                                        <input class="form-control" type="text" readonly value="TKT-0001">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Assign Staff</label>
                                        <select class="select">
                                            <option>-</option>
                                            <option selected>Mike Litorus</option>
                                            <option>John Smith</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Client</label>
                                        <select class="select">
                                            <option>-</option>
                                            <option >Delta Infotech</option>
                                            <option selected>International Software Inc</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Priority</label>
                                        <select class="select">
                                            <option>High</option>
                                            <option selected>Medium</option>
                                            <option>Low</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>CC</label>
                                        <input class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Assign</label>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Ticket Assignee</label>
                                        <div class="project-members">
                                            <a title="John Smith" data-placement="top" data-toggle="tooltip" href="#" class="avatar">
                                                <img src="assets/img/profiles/avatar-02.jpg" alt="">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Add Followers</label>
                                        <input type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Ticket Followers</label>
                                        <div class="project-members">
                                            <a title="Richard Miles" data-toggle="tooltip" href="#" class="avatar">
                                                <img src="assets/img/profiles/avatar-09.jpg" alt="">
                                            </a>
                                            <a title="John Smith" data-toggle="tooltip" href="#" class="avatar">
                                                <img src="assets/img/profiles/avatar-10.jpg" alt="">
                                            </a>
                                            <a title="Mike Litorus" data-toggle="tooltip" href="#" class="avatar">
                                                <img src="assets/img/profiles/avatar-05.jpg" alt="">
                                            </a>
                                            <a title="Wilmer Deluna" data-toggle="tooltip" href="#" class="avatar">
                                                <img src="assets/img/profiles/avatar-11.jpg" alt="">
                                            </a>
                                            <span class="all-team">+2</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label>Description</label>
                                        <textarea class="form-control"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label>Upload Files</label>
                                        <input class="form-control" type="file">
                                    </div>
                                </div>
                            </div>
                            <div class="submit-section">
                                <button class="btn btn-primary submit-btn">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Edit Ticket Modal -->

        <!-- Delete Ticket Modal -->
        <div class="modal custom-modal fade" id="delete_ticket" role="dialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="form-header">
                            <h3>Delete Ticket</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 Ticket Modal -->
        {{ csrf_field() }}
    </div>
    <!-- /Page Wrapper -->
@endsection

@section('scriptsSheets')
    <script src="{{ URL::to('js/select2.min.js') }}"></script>

    <script src="{{ URL::to('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::to('js/dataTables.bootstrap4.min.js') }}"></script>

    <script src="{{ asset('js/moment.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap-datetimepicker.min.js') }}"></script>

    <script type="text/javascript">

        let _token = $('input[name="_token"]').val();

        function submitTicketStoring() {
            let idUser = $('#idUser');
            let ticketName = $('#ticketName');
            let ticketCost = $('#ticketCost');
            let ticketDate = $('#ticketDate');

            if(idUser.val().length >8) {
                if (ticketName.val().length > 3) {
                    if ($.isNumeric(ticketCost.val())) {
                        if (ticketDate.val().length === 10) {
                            //AJAX REQUEST
                            $.ajax({
                                type: 'POST',
                                url: '{{ route("root-storeTicket") }}',
                                data: {
                                    idUser: idUser.val(),
                                    ticketName: ticketName.val(),
                                    ticketCost: ticketCost.val(),
                                    ticketDate: ticketDate.val(),
                                    _token: _token
                                },

                                success: function (result) {

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

                                error: function (result) {
                                    console.log(result);
                                    swalWithBootstrapButtons.fire({
                                        title: 'Oops',
                                        text: 'Echec de l\'opération',
                                        type: 'error',
                                        showCancelButton: true,
                                        showConfirmButton: false,
                                        cancelButtonText: 'Hummmm'
                                    })
                                }
                            });
                        } else {
                            swalWithBootstrapButtons.fire({
                                title: 'Oops',
                                text: 'Date de sortie du billet invalide !',
                                type: 'error',
                                showCancelButton: true,
                                showConfirmButton: false,
                                cancelButtonText: 'D\'accord'
                            })
                        }
                    } else{
                        swalWithBootstrapButtons.fire({
                            title: 'Oops',
                            text: 'Montant du billet invalide !',
                            type: 'error',
                            showCancelButton: true,
                            showConfirmButton: false,
                            cancelButtonText: 'D\'accord'
                        })
                    }
                } else {
                    swalWithBootstrapButtons.fire({
                        title: 'Oops',
                        text: 'Raison billet invalide !',
                        type: 'error',
                        showCancelButton: true,
                        showConfirmButton: false,
                        cancelButtonText: 'D\'accord'
                    })
                }
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'Veuillez sélectionner un employé !',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }
    </script>
@endsection