@php
    use Carbon\Carbon;
@endphp
<x-layout bodyClass="g-sidenav-show bg-dark-silk">
    <x-navbars.sidebar activePage="nfparcelascredito"></x-navbars.sidebar>
    <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg " id="main-content">
        <!-- Navbar -->
        <x-navbars.navs.auth titlePage="Contas a Receber"></x-navbars.navs.auth>
        <!-- End Navbar -->
        <div class="container-fluid py-4">

            <div class="row mb-4">
                <div class="col-lg-2 col-md-3 mt-1 mb-1">
                    <div class="col-xl-12 col-sm-12 mb-xl-0 mb-4 mt-4">
                        <div class="card">
                            <div class="card-header p-3 pt-2">
                                <div class="icon icon-lg icon-shape bg-gradient-success shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                                    <i class="fa fa-money-bill opacity-10"></i>
                                </div>
                                <div class="text-end pt-1">
                                    <p class="text-sm mb-0 text-capitalize">Total</p>
                                    <h4 class="mb-0">R$ {{ number_format($totalValue, 0, ',', '.') }}</h4>
                                </div>
                            </div>
                            <hr class="dark horizontal my-0">
                            <div class="card-footer p-3">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-3 mt-1 mb-1">
                    <div class="col-xl-12 col-sm-12 mb-xl-0 mb-4 mt-4">
                        <div class="card">
                            <div class="card-header p-3 pt-2">
                                <div class="icon icon-lg icon-shape bg-gradient-info shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                                    <i class="fa fa-check opacity-10"></i>
                                </div>
                                <div class="text-end pt-1">
                                    <p class="text-sm mb-0 text-capitalize">Contas Recebidas</p>
                                    <h4 class="mb-0">R$ {{ number_format($totalValueCreditoConcluido, 0, ',', '.') }}</h4>
                                </div>
                            </div>
                            <hr class="dark horizontal my-0">
                            <div class="card-footer p-3">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-3 mt-1 mb-1">
                    <div class="col-xl-12 col-sm-12 mb-xl-0 mb-4 mt-4">
                        <div class="card">
                            <div class="card-header p-3 pt-2">
                                <div class="icon icon-lg icon-shape bg-gradient-warning shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                                    <i class="fa fa-clock opacity-10"></i>
                                </div>
                                <div class="text-end pt-1">
                                    <p class="text-sm mb-0 text-capitalize">Contas a Receber</p>
                                    <h4 class="mb-0">R$ {{ number_format($totalValueCreditoAtivo, 0, ',', '.') }}</h4>
                                </div>
                            </div>
                            <hr class="dark horizontal my-0">
                            <div class="card-footer p-3">

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

            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card my-4">
                        <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                            <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                                <h5 class="mx-3">Contas a Receber</h5>
                            </div>
                        </div>
                        <form action="{{ route('admin.nfparcelascredito.search') }}" class="navbar-form mt-3" method="get">
                            <div class="row m-0">
                                <div class="col-3 text-left">
                                    <div class="input-group input-group-outline d-flex align-items-center">
                                        <input type="text" name="search" class="form-control"
                                            placeholder="Buscar pelo nome da empresa..."
                                            value="{{ \Request::get('search') }}">

                                    </div>
                                </div>
                                <div class="col-1">
                                    <select name="status" id="status-search" class="form-control border border-2 text-center" style="border-radius: 20px;">
                                        <option value="" disabled selected>Filtro</option>
                                        @foreach ($statusOptions as $status => $value)
                                            <option value="{{ $status }}" {{ \Request::get('status') === $status ? 'selected' : '' }}>{{ $value }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-auto">
                                    <input type="checkbox" class="btn-check"  id="btn-check-inativo" autocomplete="off"
                                    {{ \Request::get('status') === 'INATIVO' ? 'checked' : '' }}>
                                    <label class="btn btn-outline-info shadow-sm p-0 m-0 pt-2 pb-2 ps-4 pe-4" style="text-transform: none; border-radius: 20px; font-size: .9rem" for="btn-check-inativo"><i class="fa fa-times-circle-o" aria-hidden="true"></i> Inativo <i class="fa fa-times ps-3 {{ \Request::get('status') === 'INATIVO' ? '' : 'd-none' }}" style="font-weight: 600;" id="btn-check-hide" aria-hidden="true"></i></label>
                                </div>
                                <div class="col-2 text-left">
                                    <div class="input-group input-group-outline d-flex align-items-center">
                                        <div class="input-group">
                                            <input type="text"  name="date_range" id="date_range" class="form-control" value="{{ \Request::get('date_range') ?? '' }}" placeholder="Selecione um intervalo de datas" autocomplete="off">
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="col-2 text-left">
                                    <button type="submit" class="btn btn-primary btn-round btn-just-icon m-0">
                                        <i class="material-icons">search</i>
                                        <div class="ripple-container"></div>
                                    </button>
                                    <a href="{{ route('admin.nfparcelascredito.index', ['clear' => 'true']) }}" class="btn btn-dark btn-round btn-just-icon m-0"><i class="material-icons">delete</i>
                                        <div class="ripple-container"></div>
                                    </a>
                                </div>

                                <div class="col-2 text-end d-none">
                                    <a class="btn bg-gradient-dark mb-0" href="{{ route('admin.nfparcelascredito.create') }}"><i
                                            class="material-icons text-sm">add</i>&nbsp;&nbsp;Adicionar empresa</a>
                                </div>
                            </div>
                        </form>
                        <div class="card-body px-0 pb-2">
                            {{-- Messagens da session --}}
                            @include('partials.session-message')
                            <div class="table-responsive p-0">
                                <table class="table align-items-center mb-0">
                                    <thead>
                                        <tr>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                ID
                                            </th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Empresa
                                            </th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                NF
                                            </th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Cliente
                                            </th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Tipo
                                            </th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">
                                                Parcela
                                            </th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">
                                                Agência
                                            </th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">
                                                Valor
                                            </th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">
                                                Vencimento
                                            </th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">
                                                Recebimento
                                            </th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-end">
                                                Status
                                            </th>

                                            <th class="text-secondary opacity-7 d-none"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="items-container">
                                        @foreach ($parcelas as $parcela)
                                             <tr data-url="{{route('admin.nfparcelascredito.edit', $parcela->idnfparcela)}}" style="cursor: pointer;">
                                                <td class="text-center text-xs">
                                                    {{ $parcela->idnfparcela }}
                                                </td>
                                                <td class="text-center text-xs">
                                                    {{ $parcela->empresa->sigla }}
                                                </td>
                                                <td class="text-center text-xs">
                                                    <a href="{{ route('admin.compras.edit', $parcela->nf->idnf) }}">
                                                        {{ $parcela->nf->idnf }}
                                                    </a>
                                                </td>
                                                <td class="text-sm">
                                                    {{ $parcela->nf->cliente->razaosocial ?? $parcela->nf->cliente->nome ?? '-' }}
                                                </td>
                                                <td class="text-center text-xs">
                                                    {{ $parcela->nf->prodservtipo->prodservtipo ?? '-' }}
                                                </td>

                                                <td class="text-center text-xs">
                                                    {{ $parcela->parcela }} / {{ $parcela->nf->qtdparcela }}
                                                </td>
                                                <td class="text-center text-xs">
                                                    {{ $parcela->agencia->nome ?? '-' }}
                                                </td>
                                                <td class="text-center text-xs fw-bold text-success">
                                                    R$ {{ number_format($parcela->valor, 2, ',', '.') }}
                                                </td>
                                                <td class="text-center text-xs fw-bold">
                                                    {{ $parcela->datavencimento ? Carbon::parse($parcela->datavencimento)->format('d/m/y') : '' }}
                                                </td>
                                                <td class="text-center text-xs fw-bold">
                                                    {{ $parcela->datatransacao ? Carbon::parse($parcela->datatransacao)->format('d/m/y') : '' }}
                                                </td>
                                                <td data-noclicked="true" class="pe-3">
                                                    @include('partials.status-progress', ['status' => $parcela->status, 'id' => $parcela->idnfparcela, 'options' => [
                                                        ['percentage' => 50, 'status' => 'INATIVO', 'tooltip' => 'Inativo', 'class' => 'bg-danger'],
                                                        ['percentage' => 50, 'status' => 'ATIVO', 'tooltip' => 'Ativo', 'class' => 'bg-info'],
                                                        ['percentage' => 50, 'status' => 'CONCLUÍDO', 'tooltip' => 'Concluído', 'class' => 'bg-success'],
                                                    ]])
                                                </td>
                                                <td class="align-middle text-center d-none">
                                                    <a rel="tooltip" class="btn btn-sm btn-success btn-link" href="{{ route('admin.nfparcelasdebito.edit', $parcela->idnfparcela) }}" data-original-title="" title="">
                                                        <i class="material-icons">edit</i>
                                                        <div class="ripple-container"></div>
                                                    </a>
                                                    <form action="{{ route('admin.nfparcelasdebito.destroy', $parcela->idnfparcela) }}" class="d-inline" method="POST">
                                                        @csrf
                                                        @method('delete')
                                                        <button type="button" class="btn btn-sm btn-danger btn-link" data-original-title="" title=""
                                                            onclick="confirm('{{ __('Você tem certeza que deseja apagar essa parcela?') }}') ? this.parentElement.submit() : ''">
                                                            <i class="material-icons">close</i>
                                                            <div class="ripple-container"></div>
                                                        </button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div id="loading" style="display: none; text-align: center; padding: 10px;">
                                    <span>Carregando...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <x-footers.auth></x-footers.auth>
        </div>
    </main>
    <x-plugins></x-plugins>
    <x-scrollup></x-scrollup>
</x-layout>
@include('partials.update-status-progress', ['route' => route('admin.nfparcelascredito.update', ['nfparcelascredito' => ':id']), 'redirect' => 0, 'options' => [
    'INATIVO' => 'bg-danger',
    'ATIVO' => 'bg-info',
    'CONCLUÍDO' => 'bg-success'
]])
@include('partials.filter-inativo', ['routeSearch' => route('admin.nfparcelascredito.search'), 'routeIndex' => route('admin.nfparcelascredito.index')])
@include('partials.load-more', ['route' => route('admin.nfparcelascredito.fetch'), 'containerSelector' => 'main-content'])