@extends('layouts.app')

@section('title', 'Détails')

@section('third_party_stylesheets')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
@endsection

@section('breadcrumb')
    <ol class="breadcrumb border-0 m-0">
        <li class="breadcrumb-item"><a href="{{ route('home') }}">Tableau de bord</a></li>
        <li class="breadcrumb-item"><a href="{{ route('salary.index') }}">Employés</a></li>
        <li class="breadcrumb-item active">Détails</li>
    </ol>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered mb-0 text-center" id="data-table">
                                <thead>
                                    <tr>
                                        <th class="align-middle">#</th>
                                        <th class="align-middle text-center">Prénom</th>
                                        <th class="align-middle text-center">Nom</th>
                                        <th class="align-middle text-center">Salaire de base</th>
                                        <th class="align-middle text-center">Mois</th>
                                        <th class="align-middle text-center">Bonus</th>
                                        <th class="align-middle text-center">Déduction</th>
                                        <th class="align-middle text-center">Salaire net</th>
                                        <th class="align-middle text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach($paySlips as $key => $paySlip)
                                    <tr>
                                        <td class="align-middle">{{ $key + 1 }}</td>
                                        <td class="align-middle">{{ $paySlip->employe->first_name }}</td>
                                        <td class="align-middle">{{ $paySlip->employe->last_name }}</td>
                                        <td class="align-middle">{{ format_currency($paySlip->employe->base_salary) }}</td>
                                        <td class="align-middle">{{ $paySlip->month }}</td>
                                        <td class="align-middle">{{ format_currency($paySlip->bonus) }}</td>
                                        <td class="align-middle">{{ format_currency($paySlip->deductions) }}</td>
                                        <td class="align-middle">{{ format_currency($paySlip->net_salary) }}</td>
                                        <td class="align-middle">
                                            <a href="{{ route('salary.print', ['id' => $paySlip->id]) }}" class="btn btn-primary btn-sm">
                                                <i class="bi bi-printer"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('page_scripts')
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.24/b-1.7.0/b-html5-1.7.0/b-print-1.7.0/datatables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
    <script>
        var table = $('#data-table').DataTable({
            dom: "<'row'<'col-md-3'l><'col-md-5 mb-2'B><'col-md-4 justify-content-end'f>>tr<'row'<'col-md-5'i><'col-md-7 mt-2'p>>",
            "buttons": [
                {extend: 'excel',text: '<i class="bi bi-file-earmark-excel-fill"></i> Excel'},
                {extend: 'csv',text: '<i class="bi bi-file-earmark-excel-fill"></i> CSV'},
                {extend: 'print',
                    text: '<i class="bi bi-printer-fill"></i> Imprimer',
                    title: "Bulletin de salaire",
                    exportOptions: {
                        columns: [ 0, 1, 2, 3, 4 ]
                    },
                    customize: function (win) {
                        $(win.document.body).find('h1').css('font-size', '15pt');
                        $(win.document.body).find('h1').css('text-align', 'center');
                        $(win.document.body).find('h1').css('margin-bottom', '20px');
                        $(win.document.body).css('margin', '35px 25px');
                    }
                },
            ],
            ordering: false,
        });
    </script>
@endpush