@extends('layouts.master')

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@stop

@section('content')

<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header bg-info">
                <h4 class="mb-0 text-white">Dépôt</h4>
            </div>
            <form class="form-horizontal">
                <div class="form-body">
                    <div class="card-body" style="display:flex; justify-content: space-between;">
                        <h4 class="card-subtitle">Nbre Dépôt : <b>200 000</b> <small style="color:green;">htg</small></h4>
                        <h4 class="card-subtitle">Total Dépôt : <b>200 000</b> <small style="color:green;">htg</small></h4>
                    </div>
                    <hr class="mt-0 mb-2">
                    <div class="card-body text-center" style="height: 300px; overflow:auto;">
                    <small class="card-subtitle">Liste des dépôts pour 11/07/2021</small>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Banque</th>
                                    <th scope="col">Montant</th>
                                    <th scope="col">Heure</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>003</td>
                                    <td>10 000 <small>htg</small></td>
                                    <td>03:57:08</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                   
                    <hr>
                    <div class="card-body col-8 col-offset-5">
                        <button type="button" class="btn btn-success" alt="default" data-toggle="modal" data-target="#depot-modal"> <i class="fa fa-pencil"></i> Effectuer Dépôt</button>         
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header bg-info">
                <h4 class="mb-0 text-white">PAE</h4>
            </div>
            <form class="form-horizontal">
                <div class="form-body">
                    <div class="card-body" style="display:flex; justify-content: space-between;">
                        <h4 class="card-subtitle">Nbre PAE : <b>200 000</b> <small style="color:green;">htg</small></h4>
                        <h4 class="card-subtitle">Total PAE : <b>200 000</b> <small style="color:green;">htg</small></h4>
                    </div>
                    <hr class="mt-0 mb-2">
                    <div class="card-body text-center" style="height: 300px; overflow:auto;">
                    <small class="card-subtitle">Liste des PAE pour 11/07/2021</small>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">Banque</th>
                                    <th scope="col">Montant</th>
                                    <th scope="col">Heure</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">3</th>
                                    <td>003</td>
                                    <td>10 000 <small>htg</small></td>
                                    <td>03:57:08</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                   
                    <hr>
                    <div class="card-body col-8 col-offset-5">
                        <button type="button" class="btn btn-danger" alt="default" data-toggle="modal" data-target="#pae-modal"> <i class="fa fa-pencil"></i> Effectuer PAE</button>         
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Row -->

<!-- depot modal content -->
<div id="depot-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Effectuer le dépôt</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                
            </div>
            <div class="modal-body">
                <br/>
                <form>
                    <div class="form-group">
                        <label for="example-month-input2" class="control-label">Banque *</label>
                        <select class="custom-select col-12" id="example-month-input2">
                            <option selected="">Selectionner Banque</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Montant *</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Confirmer montant *</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group text-center">
                        <small>Banque 00x</small>
                        <p class="text-danger">Balance 20 000 htg</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-info waves-effect waves-light">Enregistrer</button>
            </div>
        </div>
    </div>
</div>
<!-- /.modal -->

<!-- depot modal content -->
<div id="pae-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Effectuer PEA</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                
            </div>
            <div class="modal-body">
                <br/>
                <form>
                    <div class="form-group">
                        <label for="example-month-input2" class="control-label">Banque *</label>
                        <select class="custom-select col-12" id="example-month-input2">
                            <option selected="">Selectionner Banque</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Montant *</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Confirmer montant *</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group text-center">
                        <small>Banque 00x</small>
                        <p class="text-danger">Balance 20 000 htg</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-info waves-effect waves-light">Enregistrer</button>
            </div>
        </div>
    </div>
</div>
<!-- /.modal -->

@stop