@extends('layouts.base2')
@section('title', 'Interface de gestion des Cabinets')
@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
@endpush
@section('content')
    @section('titlePage')  <h1 class="m-0">Liste des composés</h1> @stop
    <div class="container" style="padding-bottom: 2em; padding-top: 1em">
        @include('layouts.flash-message')

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="card card-primary card-tabs">
                            <div class="card-header p-0 pt-1">
                                <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home"
                                        role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Listes des actes exécutés hors séance</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-one-tabContent">
                                    <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                        <div class="row">
                                            <table class="table table-striped nowrap" id="liste_acte">
                                                <thead>
                                                    <tr>
                                                        <th>ACTE</th>
                                                        <th>MONTANT</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-sm-6">
                        <label for="acte" class="control-label">ACTE COMPOSE A EXECUTER</label>
                        <input readonly class="form-control" type="text" value="ACTE CHIMIOTHERAPHIE">
                    </div>
                    <div class="col-sm-3">
                        <label for="acte" class="control-label">NOMBRE DE SEANCE DEMANDEE</label>
                        <input readonly class="form-control" type="text" value="2">
                    </div>
                    <div class="col-sm-3">
                        <label for="acte" class="control-label">NOMBRE DE SEANCE ACCORDEE</label>
                        <input readonly class="form-control" type="text" value="2">
                    </div>
                </div>

                <div class="row" style="padding-top:2em">
                    <form action="{{ route('executer.acte.compose') }}" method="POST">
                        @csrf

                        <table id="actesTables" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Libellé de l'acte</th>
                                    <th>Montant</th>
                                    <th>Motif</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($options as $index => $option)
                                    <tr>
                                        <td>{{ $option['libelle_acte'] }}</td>
                                        <td>
                                            @if (isset($option['id']) && $option['id'] == 1)
                                                <input type="hidden" name="acte_ids[]" value="{{ $option['id'] }}">
                                                <input type="number" name="montants[{{ $option['id'] }}]" class="form-control" value="{{ $option['cout'] ?? 0 }}" min="0" step="1">
                                            @else
                                                {{ $option['cout'] ?? 'Non défini' }}
                                            @endif
                                        </td>
                                        <td>
                                            @if (isset($option['id']) && $option['id'] == 1)
                                                <input type="hidden" name="acte_ids[]" value="{{ $option['id'] }}">
                                                <input type="text" name="motifs[{{ $option['id'] }}]" class="form-control" placeholder="Entrez le motif">
                                            @else
                                                {{ $option['motif'] ?? '' }}
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <div class="row">
                            <div class="col-sm-8"></div>
                            <div class="col-sm-4">
                                <button type="submit" class="btn btn-success pull-right form-control">
                                    Exécuter
                                </button>
                            </div>
                        </div>
                    </form>
                    <h2>Liste des actes composé exécutés</h2>
                    <div class="row" style="padding-top:2em">
                        <table class="table table-striped nowrap" id="liste_acte-compose_executer">
                            <thead>
                                <tr>
                                    <th>ACTE COMPOSE</th>
                                    <th>MONTANT</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>
@stop
@section('footer')

    <script>

        $(document).ready(function(){

            if ($.fn.DataTable.isDataTable('#liste_acte')) {
                $('#liste_acte').DataTable().destroy();
            }
            var oTable = $('#liste_acte').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('charger.liste.acte.compose.executer') }}",
                columns: [
                    { data: 'libelle_acte', name: 'libelle_acte' },
                    { data: 'cout', name: 'cout'},
                    // { data: 'motif', name: 'motif'}
                ]
            });

        });


    </script>

@stop