@extends('layout.app')

@section('content')
    @php
        $countPharmacie = $datas->where('sale_category', 'pharmacie')->count();
        $countHospitalisation = $datas->where('sale_category', 'hospitalisation')->count();
    @endphp
    <style>
        .filter-btn,
        .sale-badge {
            margin-right: 5px;
            padding: 4px 12px !important;
            font-size: 11px !important;
            border-radius: 50px !important;
            text-transform: uppercase;
            font-weight: bold;
            display: inline-block;
            border: none;
            transition: all 0.2s;
        }

        .filter-btn {
            margin-bottom: 10px;
            cursor: pointer;
        }

        .filter-btn:hover,
        .filter-btn.active {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            outline: 2px solid rgba(0, 0, 0, 0.1);
        }

        .color-all {
            background-color: #f8f9fa !important;
            color: #212529 !important;
            border: 1px solid #ddd !important;
        }

        .color-pharmacie {
            background-color: #17a2b8 !important;
            color: white !important;
        }

        .color-hospitalisation {
            background-color: #007bff !important;
            color: white !important;
        }
    </style>
    <div class="page-content">
        <div class="page-bar">
            <div class="page-title-breadcrumb">
                <div class=" pull-left">
                    <div class="page-title">Ventes ({{ $datas->count() }})  &nbsp;
                        <a class="btn btn-primary" href="{{ route('sales.create') }}">Ajouter</a>
                    </div>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="tabbable-line">
                    <ul class="nav nav-pills nav-pills-rose">
                        <li class="nav-item tab-all"><a class="nav-link active"
                                                        href="#tab1" data-toggle="tab">Liste</a></li>

                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active fontawesome-demo" id="tab1">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card  card-box">
                                        <div class="card-head">
                                            <header>Filtres rapides</header>
                                            <div class="tools">
                                                <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
                                                <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
                                                <a class="t-close btn-color fa fa-times" href="javascript:;"></a>
                                            </div>
                                        </div>
                                        <div class="card-body ">
                                            <div class="mb-4">
                                                <button type="button" class="filter-btn active color-all" data-filter="all"><i class="fa fa-list mr-1"></i>Tous ({{ $datas->count() }})</button>
                                                <button type="button" class="filter-btn sale-badge color-pharmacie" data-filter="pharmacie"><i class="fa fa-medkit mr-1"></i>Pharmacie ({{ $countPharmacie }})</button>
                                                <button type="button" class="filter-btn sale-badge color-hospitalisation" data-filter="hospitalisation"><i class="fa fa-hospital mr-1"></i>Hospitalisations ({{ $countHospitalisation }})</button>
                                            </div>

                                            <div class="table-scrollable">
                                                <table class="table table-hover full-width custom" id="saleTable">
                                                    <thead>
                                                    <tr>
                                                        <th> Date </th>
                                                        <th> Vendeur </th>
                                                        <th> Commande </th>
                                                        <th> Type </th>
                                                        <th> Total ({!! htmlentities(auth()->user()->company->currency_symbol, ENT_NOQUOTES, 'UTF-8') !!}) </th>
                                                        <th> Actions </th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($datas as $data)
                                                        <tr data-sale-type="{{ $data->sale_category }}">
                                                            <td>{{ $data->datetime->translatedFormat('D d M Y à H:i') }}</td>
                                                            <td>{{ $data->user->name }}</td>
                                                            <td class="center"><a href="#" data-target="#saleModal" class="commands-link" data-toggle="modal" data-content="{{ $data->commands }}">Voir</a></td>
                                                            <td class="center">
                                                                @if($data->sale_category === 'hospitalisation')
                                                                    <span class="sale-badge color-hospitalisation"><i class="fa fa-hospital mr-1"></i>Hospitalisation</span>
                                                                @else
                                                                    <span class="sale-badge color-pharmacie"><i class="fa fa-medkit mr-1"></i>Pharmacie</span>
                                                                @endif
                                                            </td>
                                                            <td class="center">{{ number_format($data->total, 0, '', ' ') }}</td>
                                                            <td class="center">
                                                                @if($data->invoice())
                                                                    <a href="{{ route('invoices.download', [$data->invoice()->custom_id, $data->invoice()->getTypeForDownload()]) }}" class="" data-toggle="tooltip" data-placement="top" title="Télécharger la Facture">
                                                                        <i class="hgi-stroke hgi-file-download text-dark h3"></i>
                                                                    </a>
                                                                    <a href="#" data-target="#paymentModal" data-toggle="modal" data-id="{{ $data->invoice()->id }}" data-remaining="{{ $data->invoice()->rest_to_pay }}" class="btn-payment" data-toggle="tooltip" data-placement="top" title="Gérer les Paiements">
                                                                        <i class="hgi-stroke hgi-invoice-02 text-dark h3"></i>
                                                                    </a>
                                                                @endif
                                                                @if(!$data->hasRelatedRecords() AND !auth()->user()->isComptable())
                                                                <a href="#" data-target="#deleteModal" data-toggle="modal" data-href="{{ route('sales.delete', $data->custom_id) }}" data-toggle="tooltip" data-placement="top" class="" title="Supprimer">
                                                                    <i class="hgi-stroke hgi-sharp hgi-waste text-dark h3"></i>
                                                                </a>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('invoice.partials.payment-modal')
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            var table = $('#saleTable').DataTable();

            $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                if (settings.nTable.id !== 'saleTable') return true;

                var activeFilter = $('.filter-btn.active').data('filter');
                var rowType = $(table.row(dataIndex).node()).data('sale-type');

                return activeFilter === 'all' || activeFilter === rowType;
            });

            $('.filter-btn').on('click', function () {
                $('.filter-btn').removeClass('active');
                $(this).addClass('active');
                table.draw();
            });

            table.draw();
        });

        $('.commands-link').click(function () {
            var commands = JSON.parse($(this).attr('data-content'))
            var content = '<table style="margin: auto">';
            let total_qte = 0
            let total_price = 0
            let currency = '{{ auth()->user()->company->currency_symbol }}'
            for(var i in commands){
                total_qte += commands[i].qte
                total_price += commands[i].price
                content += '<tr>' +
                    '<td>' + commands[i].productName + '</td>' +
                    '<td> &nbsp; &nbsp;' + commands[i].qte + '</td>' +
                    '<td align="right"> &nbsp; &nbsp;' + commands[i].price.toLocaleString('fr-FR') + currency + '</b></td>' +
                    '</tr>'
            }
            content += '<tfoot class="text-dark">' +
                '<tr>' +
                '<td style="padding-top: 20px"><b>TOTAL</b></td>' +
                '<td style="padding-top: 20px"> &nbsp; &nbsp;<b>'+total_qte+'</b></td>' +
                '<td align="right" style="padding-top: 20px"> &nbsp; &nbsp;<b>' + total_price.toLocaleString('fr-FR') + currency + '</b></td>' +
                '</tr>' +
                '</tfoot>'
            content += '</table>'
            $('#saleModal .modal-body').html(content)
        })
    </script>
@endpush