@extends('layouts.index')

@section('estilos')
    <link rel="stylesheet" href="{{ asset('css/dataTables/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dataTables/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dataTables/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
@stop

@section('menu')
    @include('menu.index');
@stop

@section('content')

<h3 class="text-muted color_pag">{{'Mis Pagos'}}</h3>
<input type="hidden" id="identificador" value="#pagos" >
<div class="espacio10">
    <table id="pagos" class="table table-striped table-bordered shadow-lg mt-4 dt-responsive nowrap" style="width:100%">
        <thead class="bg-primary text-white">
            <tr>
                <th scope="col" width="10%">{{'Fecha Atencion'}}</th>
                <th scope="col" width="30%">{{'Odontologo'}}</th>               
                <th scope="col" width="30%">{{'Paciente'}}</th>
                <th scope="col" width="10%">{{'Valor'}}</th>
                <th scope="col" width="20%">{{'Opciones'}}</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($pagos as $pago)
                <tr>
                    <td>{{date("d-m-Y",strtotime($pago->created_at))}}</td>
                    <td>{{$pago->odontologo}}</td>
                    <td>{{$pago->paciente}}</td>
                    <td>{{number_format($pago->valor)}}</td>
                    <td>
                        <a id="modal-detalle" href="#detalle" role="button" class="btn btn-primary btn-sm" data-toggle="modal">Detalle</a>
                        <a id="modal-comprobante" href="#comprobante" role="button" class="btn btn-success btn-sm" data-toggle="modal">Comprobante</a>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<!-- Modolas -->

<!-- Modal Detalle -->

<div class="modal fade" id="detalle" role="dialog" aria-labelledby="modal_detalle" aria-hidden="true">
	<div class="modal-dialog modal-md" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modal_detalle">
                    Detalle del pago efectuado
                </h5> 
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                --  detalle --
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>   
    </div>
</div>

<!-- Modal Comprobante -->

<div class="modal fade" id="comprobante" role="dialog" aria-labelledby="modal_comprobante" aria-hidden="true">
	<div class="modal-dialog modal-md" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modal_comnprobante">
                    Descarga de Comprobante de pago
                </h5> 
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                --  descargar comprobante  --
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>   
    </div>
</div>

@stop

@section('scripts')
    <script src="{{ asset('js/dataTables/jquery-3.5.1.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/jquery.dataTables.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/dataTables.bootstrap4.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/dataTables.responsive.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/responsive.bootstrap4.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/config-dt.js') }}" defer></script>
@stop