@extends('layouts.dashboard.app')

@section('style')
    <style>
        .cards {
            height: 150px;
            width: 380px;
        }

        .cardss {
            height: 150px;
            width: 250px;
        }

        .search {
            width: 350px;
            border-radius: 50px;

        }

        .btn {
            border-radius: 50px;
        }

        .btnSearch {
            width: 56px;
            height: 50px;
            border-radius: 50%;
            translate: -53px;
            border-color: #39AFD1
        }

        .btnSearch:hover {
            background-color: #313a46 !important;
            border-color: #313a46 !important;
        }

        p {
            padding-left: 40px;
            : inline-block;
            font-size: xx-large;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="card">
            <div class="card-body">
                <div class="row mb-1">
                    <div class="d-flex ">
                        @can('viewAny', App\Models\Settlement::class)
                            <div class="col-md-6">
                                <a style="float: left" href="{{ route('Settlement.all') }}" class="btn btn-info">Réglements</a>

                            </div>
                        @endcan
                        @can('create', App\Models\Settlement::class)
                            <div class="col-md-6">
                                <a style="float: right" href="{{ route('Settlement.create') }}"
                                    class="btn btn-outline-info">Créer</a>

                            </div>
                        @endcan

                    </div>
                </div>

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

    <div class="row ">
        <div class="col-md-4">
            <div class=" cards mx-4 shadow bg-body rounded">
                <form class="d-flex" action="{{ route('Settlement.search') }}" method="POST" style="padding-left: 40px;">
                    @csrf
                    <input type="hidden" id="company" name="company" value="{{ $company->id }}">
                    <input class="form-control me-1 search" name="search" id="search" type="search"
                        placeholder="Réference facture" aria-label="Search">
                    <button class="btn btn-sm btn-primary btnSearch" id="btnSearch" type="submit">
                        <i class="uil uil-search"></i>
                    </button>
                </form>
            </div>
        </div>
        <div class="col-md-4 ">
            <div class=" cardss mx-5 shadow bg-body rounded" id="montants">
                <div class="card-body">
                    <h5 class="card-title">Non Payé</h5>
                    <p class="card-text" id="vqlue1">{{ $montant }}</p> <span>Mad</span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class=" cardss shadow bg-body rounded" id="montants2">
                <div class="card-body">
                    <h5 class="card-title">Balance</h5>
                    <p class="card-text" id="vqlue2">{{ $balance }}</p> <span>Mad</span>
                </div>
            </div>
        </div>
    </div>

    <h5 class="card-title">Listes des notes: {{ $company->company }}</h5>

    <div class="row mt-2">
        <div class=" shadow bg-body rounded">

            <div class="card-body">
                <table class="table " id="">
                    <thead>
                        <tr>
                            <th class="text-center">Ref </th>
                            <th class="text-center">Ref Dossier </th>
                            <th class="text-center">N sinistre</th>
                            <th class="text-center">Date sinistre</th>
                            <th class="text-center">Nature</th>
                            <th class="text-center">Montant</th>
                            <th class="text-center">Montant Restant</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($payments as $payment)
                            <tr>
                                <td class="text-center">{{ $payment->ref ?? null }} </td>
                                <td class="text-center">{{ $payment->dossier->ref ?? null }}</td>
                                <td class="text-center">{{ $payment->dossier->numero_sinistre ?? null }}</td>
                                <td class="text-center">{{ $payment->dossier->date_sinistre ?? null }}</td>
                                <td class="text-center">{{ $payment->dossier->typeexpertise->type ?? null }}</td>
                                <td class="text-center "> <span class=" fs-5 badge bg-primary">
                                        {{ $payment->montant ?? null }}DH </span></td>
                                <td class="text-center "> <span class=" fs-5 badge bg-warning">
                                        {{ $payment->montant_restant ?? null }}DH </span></td>
                                @if ($payment->note_honoraire_status_id == 1)
                                    <td>
                                        <span class="badge bg-success">Payer</span>
                                    </td>
                                @else
                                    @can('update', App\Models\Settlement::class)
                                        <td class="text-center">
                                            <form action="{{ route('Settlement.update', $payment->id) }}" method="post">
                                                @csrf
                                                @method('put')
                                                <button type="submit" class="btn btn-info">Payer</button>
                                            </form>
                                        </td>
                                    @endcan
                                @endif



                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        var montant = document.getElementById('vqlue1').innerText;
        var montant2 = document.getElementById('vqlue2').innerText;
        var card = document.getElementById('montants');
        var card2 = document.getElementById('montants2');
        console.log(montant, montant2);
        if (montant > 0) {
            card.style.cssText =
                " webkit-box-shadow: 0px 20px 33px -15px rgb(6 18 24 / 50%), 0px 2px 11px -2px #ff0000ad !important;box-shadow: rgb(6 18 24 / 50%) 0px 5px 33px -15px, rgb(255 0 0 / 68%) 0px 3px 17px -2px !important;border-color: transparent !important;transition: 1.5s;";
        } else if (montant == 0) {
            card.style.cssText =
                " webkit-box-shadow: 0px 20px 33px -15px rgb(6 18 24 / 50%), 0px 2px 11px -2px #ff0000ad !important;box-shadow: rgb(6 18 24 / 50%) 0px 5px 33px -15px, rgb(0 255 0 / 68%) 0px 3px 17px -2px !important;border-color: transparent !important;transition: 1.5s;";

        }
        if (montant2 > 0) {
            card2.style.cssText =
                " webkit-box-shadow: 0px 20px 33px -15px rgb(6 18 24 / 50%), 0px 2px 11px -2px #ff0000ad !important;box-shadow: rgb(6 18 24 / 50%) 0px 5px 33px -15px, rgb(0 255 0 / 68%) 0px 3px 17px -2px !important;border-color: transparent !important;transition: 1.5s;";

        } else if (montant2 == 0) {
            card2.style.cssText =
                " webkit-box-shadow: 0px 20px 33px -15px rgb(6 18 24 / 50%), 0px 2px 11px -2px #ff0000ad !important;box-shadow: rgb(6 18 24 / 50%) 0px 5px 33px -15px, rgb(0 255 0 / 68%) 0px 3px 17px -2px !important;border-color: transparent !important;transition: 1.5s;";

        }
        // var search = document.getElementById('search').innerText;
        // var company = document.getElementById('company').innerText;

        // let btn = document.getElementById('btnSearch');
        // btn.addEventListener('click',()=>{
        //     $.ajax({
        //         url: '/Settlement/'.company.'/search/'.ref,
        //         type: 'get',
        //         success: function(response) {
        //             console.log(response);
        //             var html = '';
        //             $.each(response, function(k, v) {

        //                 html += "<tr>";
        //                 html += "<td>" + v.ref + "</td>";
        //                 html += "<td>" + v.dossier.ref + "</td>";
        //                 html += "<td>" + v.dossier.numero_sinitre + "</td>";
        //                 html += "<td>" + v.dossier.date_sinistre + "</td>";
        //                 html += "<td> " + v.typeexpertise.type +
        //                     "</td>";
        //                 html += "<td>" + v.montant + "</td>";
        //                 html += "<td><span class='badge bg-success' >" + v.montant_restant+ "</span> </td>";
        //                 html += "<td > <a href='Dossier/" + v.id +
        //                     "' class='text-info rounded-pill' > <i class='uil uil-eye fs-4'> </i> </a> </td>";
        //                 html += "</tr>";
        //             });
        //             html += '';

        //             $("#myTable tbody").html(html)
        //         }
        //     });

        })
    </script>
@endsection
