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

@section('styleSheets')

@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">Payslip</h3>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url('root/salaries/') }}">Salaires</a></li>
                            <li class="breadcrumb-item active">Payslip</li>
                        </ul>
                    </div>
                    <div class="col-auto float-right ml-auto">
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-white">CSV</button>
                            <button class="btn btn-white">PDF</button>
                            <button class="btn btn-white"><i class="fa fa-print fa-lg"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <div class="row justify-content-center">
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <h1 class="text-center">Mois {{ App\Utils\Utils::getFrenchMonth(date('M'), true) }}</h1>
                            <h4 class="text-center">
                                - Génération de fiche de paie -
                            </h4>
                            <h3 class="text-center">PSL-{{ \App\Http\Controllers\RootController::generateUppercaseToken(6) }}</h3>
                            <br>

                            <div class="row justify-content-center">
                                <div style="display: inline-block; margin-right: 30px;">
                                    <img src="{{ asset('storage/fileManager/'.$salary->societyLogo) }}" class="inv-logo" alt="" style="margin-top: -8px">
                                </div>

                                <div style="display: inline-block">
                                    <ul class="list-unstyled mb-0" >
                                        <li><h3>{{ $salary->societyName }}</h3></li>
                                        <li>262 BKK Bè Klikamé</li>
                                        <li>05 BP 267 Lomé - Togo</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <div>
                                        <h4 class="m-b-10"><strong>Primes</strong></h4>
                                        <table class="table table-bordered">
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <strong>Salaire Brute</strong>
                                                    <span class="float-right font-weight-bolder">
                                                        <script type="text/javascript">
                                                        document.write(
                                                            new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format('{{ $salary->employeeSalary }}')
                                                        );
                                                    </script>
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <strong>Efficience</strong>
                                                    <span class="float-right font-weight-bolder">
                                                        <input onkeyup="updatePaySlip()" id="efficieny" style="border: none; text-align: right; width: 50px; font-weight: 700; color: #333" type="text" value="0"> CFA
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <strong>Précision</strong>
                                                    <span class="float-right font-weight-bolder">
                                                        <input onkeyup="updatePaySlip()" id="precision" style="border: none; text-align: right; width: 50px; font-weight: 700; color: #333" type="text" value="0"> CFA
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <strong>Délai</strong>
                                                    <span class="float-right font-weight-bolder">
                                                        <input onkeyup="updatePaySlip()" id="delay" style="border: none; text-align: right; width: 50px; font-weight: 700; color: #333" type="text" value="0"> CFA
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong>Total Primes</strong> <span class="float-right font-weight-bolder" id="primes">0 CFA</span></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div>
                                        <h4 class="m-b-10"><strong>Déductions</strong></h4>
                                        <table class="table table-bordered">
                                            <tbody>
                                            <tr>
                                                <td>
                                                    <strong>Charges</strong>
                                                    <span class="float-right font-weight-bolder">
                                                        <input onkeyup="updatePaySlip()" id="charge" style="border: none; text-align: right; width: 50px; font-weight: 700; color: #333" type="text" value="0"> CFA
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <strong>Arrièrés</strong>
                                                    <span class="float-right font-weight-bolder">
                                                        <input onkeyup="updatePaySlip()" id="backs" style="border: none; text-align: right; width: 50px; font-weight: 700; color: #333" type="text" value="0"> CFA
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <strong>Retards</strong>
                                                    <span class="float-right font-weight-bolder">
                                                        <input onkeyup="updatePaySlip()" id="late" style="border: none; text-align: right; width: 50px; font-weight: 700; color: #333" type="text" value="0"> CFA
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <strong>Absences</strong>
                                                    <span class="float-right font-weight-bolder animated infinite tada">
                                                        <input class="" onkeyup="updatePaySlip()" id="absences" style="border: none; text-align: right; width: 50px; font-weight: 700; color: #333" type="text" value="0"> CFA
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td><strong>Total Déductions</strong> <span id="deductions" class="float-right font-weight-bolder">0 CFA</span></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-sm-12 text-center">
                                    <p>Salaire Net <span class="text-muted" id="percent">+0%</span></p>
                                    <h1 style="font-weight: 700; margin-top: -20px" id="netSalary">
                                        <script type="text/javascript">
                                            document.write(
                                                new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format('{{ $salary->employeeSalary }}')
                                            );
                                        </script>
                                    </h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Chat Right Sidebar -->
                <div class="col-lg-3 chat-profile-view chat-sidebar" id="" style="height: 655px !important; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.3)">
                    <div class="chat-window video-window">
                        <div class="fixed-header">
                            <ul class="nav nav-tabs nav-tabs-bottom">
                                <li class="nav-item"><a class="nav-link" href="#activities_tab" data-toggle="tab">Activités</a></li>
                                <li class="nav-item"><a class="nav-link active" href="#profile_tab" data-toggle="tab">Profile</a></li>
                            </ul>
                        </div>
                        <div class="tab-content chat-contents">
                            <div class="content-full tab-pane" id="activities_tab">
                                <div class="chat-wrap-inner">
                                    <div class="chat-box">
                                        <div class="chats">
                                            <div class="chat chat-left">
                                                <div class="chat-avatar">
                                                    <a href="#" class="avatar">
                                                        <img alt="" src="{{ asset('/storage/usersProfiles/'.$salary->employerProfile) }}">
                                                    </a>
                                                </div>
                                                <div class="chat-body">
                                                    <div class="chat-bubble">
                                                        <div class="chat-content">
                                                            <span class="task-chat-user">You</span> <span class="chat-time">8:35 am</span>
                                                            <div class="call-details">
                                                                <i class="material-icons">phone_missed</i>
                                                                <div class="call-info">
                                                                    <div class="call-user-details">
                                                                        <span class="call-description">Jeffrey Warden missed the call</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="chat chat-left">
                                                <div class="chat-avatar">
                                                    <a href="profile.html" class="avatar">
                                                        <img alt="" src="assets/img/profiles/avatar-02.jpg">
                                                    </a>
                                                </div>
                                                <div class="chat-body">
                                                    <div class="chat-bubble">
                                                        <div class="chat-content">
                                                            <span class="task-chat-user">John Doe</span> <span class="chat-time">8:35 am</span>
                                                            <div class="call-details">
                                                                <i class="material-icons">call_end</i>
                                                                <div class="call-info">
                                                                    <div class="call-user-details"><span class="call-description">This call has ended</span></div>
                                                                    <div class="call-timing">Duration: <strong>5 min 57 sec</strong></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="chat-line">
                                                <span class="chat-date">January 29th, 2019</span>
                                            </div>
                                            <div class="chat chat-left">
                                                <div class="chat-avatar">
                                                    <a href="profile.html" class="avatar">
                                                        <img alt="" src="assets/img/profiles/avatar-05.jpg">
                                                    </a>
                                                </div>
                                                <div class="chat-body">
                                                    <div class="chat-bubble">
                                                        <div class="chat-content">
                                                            <span class="task-chat-user">Richard Miles</span> <span class="chat-time">8:35 am</span>
                                                            <div class="call-details">
                                                                <i class="material-icons">phone_missed</i>
                                                                <div class="call-info">
                                                                    <div class="call-user-details">
                                                                        <span class="call-description">You missed the call</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="chat chat-left">
                                                <div class="chat-avatar">
                                                    <a href="profile.html" class="avatar">
                                                        <img alt="" src="assets/img/profiles/avatar-02.jpg">
                                                    </a>
                                                </div>
                                                <div class="chat-body">
                                                    <div class="chat-bubble">
                                                        <div class="chat-content">
                                                            <span class="task-chat-user">You</span> <span class="chat-time">8:35 am</span>
                                                            <div class="call-details">
                                                                <i class="material-icons">ring_volume</i>
                                                                <div class="call-info">
                                                                    <div class="call-user-details">
                                                                        <a href="#" class="call-description call-description--linked" data-qa="call_attachment_link">Calling John Smith ...</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="text-center bg-white">
                                        @if ((date('t') - date('d')) <= 8)
                                            <div class="btn btn-success" style="cursor: pointer;" onclick="notifyPaySlip(true)">
                                                Notifier
                                            </div>
                                        @else
                                            <div class="btn btn-danger" style="cursor: pointer;" onclick="notifyPaySlip(false)">
                                                Notifier
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="content-full tab-pane show active" id="profile_tab">
                                <div class="display-table">
                                    <div class="table-row">
                                        <div class="table-body">
                                            <div class="table-content">
                                                <div class="chat-profile-img">
                                                    <div class="edit-profile-img">
                                                        <img src="{{ asset('/storage/usersProfiles/'.$salary->employerProfile) }}" alt="">
                                                    </div>
                                                    <h3 class="user-name m-t-10 mb-0">{{ $salary->employeeFirstname.' '.$salary->employeeLastname }}</h3>
                                                    <small class="text-muted">{{ $salary->designationName }}</small>
                                                </div>
                                                <div class="chat-profile-info">
                                                    <ul class="user-det-list">
                                                        <li>
                                                            <span><i class="la la-map-marker"></i></span>
                                                            <span class=" text-muted">{{ $salary->employeeAdress }}</span>
                                                        </li>
                                                        <li>
                                                            <span><i class="la la-briefcase"></i></span>
                                                            <span class="text-muted">
                                                                {{ App\Utils\Utils::getFrenchMonthX( App\Utils\Utils::getDBDateFormat($salary->employeeJoinDate, false), true) }}
                                                                - 05 mois
                                                            </span>
                                                        </li>
                                                        <li>
                                                            <span><i class="la la-envelope"></i></span>
                                                            <span class="text-muted">
                                                                {{ $salary->employeeEmail, 100 }}
                                                            </span>
                                                        </li>
                                                        <li>
                                                            <span><i class="la la-phone"></i></span>
                                                            <span class="text-muted">
                                                                {{ App\Utils\Utils::getTogolesePhoneFormat($salary->employeePhone) }} - Togocel
                                                            </span>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="text-center bg-white">
                                                    @if ((date('t') - date('d')) <= 8)
                                                        <div class="btn btn-success" style="cursor: pointer;" onclick="notifyPaySlip(true)">
                                                            Notifier
                                                        </div>
                                                    @else
                                                        <div class="btn btn-danger" style="cursor: pointer;" onclick="notifyPaySlip(false)">
                                                            Notifier
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>



                    </div>
                </div>
                <!-- /Chat Right Sidebar -->
            </div>
        </div>
        <!-- /Page Content -->

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

@section('scriptsSheets')
    <script type="text/javascript">

        function notifyPaySlip(generate) {
            if (generate){
                swalWithBootstrapButtons.fire({
                    title: 'Un instant',
                    text: 'Etes vous sûr de vouloir notifier {{ $salary->employeeFirstname.' '.$salary->employeeLastname }} de sa paie ?',
                    type: 'warning',
                    showConfirmButton: true,
                    showCancelButton: true,
                    confirmButtonText: 'Non',
                    cancelButtonText: 'Oui ! Notifier'
                }).then((action)=>{
                    if (action.dismiss==="cancel") {
                        swalWithBootstrapButtons.fire({
                            title: 'Good Job',
                            text: 'Notification effectuée avec succès !',
                            type: 'success',
                            showConfirmButton: true,
                            confirmButtonText: 'D\'accord'
                        })


                    }
                })
            } else{
                swalWithBootstrapButtons.fire({
                    title: 'Oops',
                    text: 'On n\'est pas encore à la fin du mois',
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })
            }
        }

        function updatePaySlip() {
            let efficience = parseInt($('#efficieny').val());
            let precision = parseInt($('#precision').val());
            let delay = parseInt($('#delay').val());

            let primes = $('#primes');
            let primesVal = efficience + precision + delay;
            primes.text(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format(primesVal));

            let charges = parseInt($('#charge').val());
            let backs = parseInt($('#backs').val());
            let lates = parseInt($('#late').val());
            let absences = parseInt($('#absences').val());

            let deductions = $('#deductions');
            let deductionsVal = charges + backs + lates + absences;
            deductions.text(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format(deductionsVal));

            let brutSalary = parseInt('{{ $salary->employeeSalary }}');
            let netSalary = $('#netSalary');
            let netSalaryVal = brutSalary + primesVal - deductionsVal;
            netSalary.text(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'XOF' }).format(netSalaryVal));

            let percent = $('#percent');
            let percentVal = (netSalaryVal - brutSalary) / 1000;
            if (percentVal > 0){
                percent.text('+' + percentVal + '%');

                percent.removeClass('text-danger');
                percent.removeClass('text-muted');
                percent.addClass('text-success');
            } else if (percentVal < 0){
                percent.text(percentVal + '%');
                percent.removeClass('text-muted');
                percent.removeClass('text-success');
                percent.addClass('text-danger');
            } else{
                percent.text('0%');
                percent.removeClass('text-danger');
                percent.removeClass('text-success');
                percent.addClass('text-muted');
            }
        }
    </script>
@endsection