@extends('layouts.master')
@section('title')
    @lang('translation.crm')
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')Configuración @endslot
        @slot('title')Banco @endslot
    @endcomponent
    
    <div class="row">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Bancos</h4>
                <div class="flex-shrink-0">
                    <button 
                        type="button" 
                        class="btn btn-secondary waves-effect waves-light" 
                        data-bs-toggle="modal" 
                        data-bs-target="#exampleModalgrid">
                        <i class="ri-add-fill align-middle"></i> Tarjeta
                    </button>
                    <div class="modal fade" id="exampleModalgrid" tabindex="-1" aria-labelledby="exampleModalgridLabel">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalgridLabel">Nueva Tarjeta</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form action="javascript:void(0);">
                                        <div class="row g-3">
                                            <div class="col-lg-12">
                                                <label for="TitularInput" class="form-label">Titular</label>
                                                <input 
                                                    id="TitularInput" 
                                                    name="titular"
                                                    type="text" 
                                                    class="form-control" 
                                                    placeholder="Ingresa el titular"
                                                    required="true">
                                            </div><!--end col-->
                                            <div class="col-lg-12">
                                                <label for="BancoInput" class="form-label">Banco</label>
                                                <input 
                                                    id="BancoInput" 
                                                    name="banco"
                                                    type="text" 
                                                    class="form-control" 
                                                    placeholder="Ingresa el Banco"
                                                    required="true">
                                            </div><!--end col-->
                                            <div class="col-lg-12">
                                                <label for="NumeroTarjeta" class="form-label">Número de tarjeta</label>
                                                <input 
                                                    id="NumeroTarjeta" 
                                                    name="tarjeta"
                                                    type="text" 
                                                    class="form-control" 
                                                    placeholder="Ingresa el número de tarjeta"
                                                    maxlength="16"
                                                    minlength="16"
                                                    required="true">
                                            </div><!--end col-->
                                            <div class="col-xxl-4">
                                                <label for="VigenciaInput" class="form-label">Vigencia</label>
                                                <input 
                                                    id="VigenciaInput" 
                                                    name="vigencia"
                                                    type="text" 
                                                    class="form-control" 
                                                    placeholder="XX/YY"
                                                    required="true"
                                                    maxlength="5">
                                            </div><!--end col-->
                                            <div class="col-xxl-4">
                                                <label for="cvInput" class="form-label">CV</label>
                                                <input 
                                                    id="cvInput"
                                                    name="cv"
                                                    type="text" 
                                                    class="form-control"  
                                                    placeholder="Ingresa el cv"
                                                    maxlength="4"
                                                    minlength="4"
                                                    required="true">
                                            </div><!--end col-->
                                            <div class="col-xxl-4">
                                                <label for="estatusSelect" class="form-label">Estatus</label>
                                                <select 
                                                    id="estatusSelect" 
                                                    name="estatus"
                                                    class="form-select form-select-tf" 
                                                    aria-label=".form-select-tf"
                                                    required="true">
                                                    <option selected>Elige el estatus</option>
                                                    <option value="1">Regular</option>
                                                    <option value="2">Principal</option>
                                                </select>
                                            </div><!--end col-->
                                            <div class="col-lg-12">
                                                <div class="hstack gap-2 justify-content-end">
                                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                                    <button type="submit" class="btn btn-primary">Submit</button>
                                                </div>
                                            </div><!--end col-->
                                        </div><!--end row-->
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- end card header -->

            <div class="card-body">
                <div class="table-responsive table-card">
                    <table class="table table-borderless table-hover table-nowrap align-middle mb-0">
                        <thead class="table-light">
                            <tr class="text-muted">
                                <th scope="col">Banco</th>
                                <th scope="col" style="width: 16%;">Status</th>
                                <th scope="col">Titular</th>
                                <th scope="col" style="width: 20%;">Número</th>
                                <th scope="col" style="width: 12%;">Vigencia</th>
                                <th scope="col" style="width: 10%;">Acciones</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td>Wells Fargo LLC</td>
                                <td><span class="badge bg-success-subtle text-success p-2">Principal</span></td>
                                <td>Donald Risher</td>                                                               
                                <td>
                                    <div class="text-nowrap">**** **** 1234</div>
                                </td>
                                <td>Sep, 2029</td> 
                                <td>
                                    <div class="dropdown d-inline-block">
                                        <button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-more-fill align-middle"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li>
                                                <a href="#!" class="dropdown-item">
                                                    <i class="ri-eye-fill align-bottom me-2 text-muted"></i>
                                                    View
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#!" class="dropdown-item edit-item-btn">
                                                    <i class="ri-pencil-fill align-bottom me-2 text-muted"></i> 
                                                    Edit
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Raitech Bank</td>
                                <td><span class="badge bg-warning-subtle text-warning p-2">Regular</span></td>                                
                                <td>Sofia Cunha</td>                                
                                <td>
                                    <div class="text-nowrap">**** **** 2345</div>
                                </td>
                                <td>Sep, 2029</td>
                                <td>
                                    <div class="dropdown d-inline-block">
                                        <button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-more-fill align-middle"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li>
                                                <a href="#!" class="dropdown-item">
                                                    <i class="ri-eye-fill align-bottom me-2 text-muted"></i>
                                                    View
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#!" class="dropdown-item edit-item-btn">
                                                    <i class="ri-pencil-fill align-bottom me-2 text-muted"></i> 
                                                    Edit
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>William PVT</td>
                                <td><span class="badge bg-danger-subtle text-danger p-2">Baja</span></td>                                
                                <td>Luis Rocha</td>                                
                                <td>
                                    <div class="text-nowrap">**** **** 3456</div>
                                </td>
                                <td>Sep, 2022</td>
                                <td>
                                    <div class="dropdown d-inline-block">
                                        <button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-more-fill align-middle"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li>
                                                <a href="#!" class="dropdown-item">
                                                    <i class="ri-eye-fill align-bottom me-2 text-muted"></i>
                                                    View
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#!" class="dropdown-item edit-item-btn">
                                                    <i class="ri-pencil-fill align-bottom me-2 text-muted"></i> 
                                                    Edit
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Loiusee LLP</td>
                                <td><span class="badge bg-danger-subtle text-danger p-2">Baja</span></td>                                
                                <td>Vitoria Rodrigues</td>                                
                                <td>
                                    <div class="text-nowrap">**** **** 4567</div>
                                </td>
                                <td>Sep, 2021</td>
                                <td>
                                    <div class="dropdown d-inline-block">
                                        <button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-more-fill align-middle"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li>
                                                <a href="#!" class="dropdown-item">
                                                    <i class="ri-eye-fill align-bottom me-2 text-muted"></i>
                                                    View
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#!" class="dropdown-item edit-item-btn">
                                                    <i class="ri-pencil-fill align-bottom me-2 text-muted"></i> 
                                                    Edit
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>Apple Inc.</td>
                                <td><span class="badge bg-danger-subtle text-danger p-2">Baja</span></td>                                
                                <td>Vitoria Rodrigues</td>                                
                                <td>
                                    <div class="text-nowrap">**** **** 5678</div>
                                </td>
                                <td>Sep, 2021</td>
                                <td>
                                    <div class="dropdown d-inline-block">
                                        <button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="ri-more-fill align-middle"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li>
                                                <a href="#!" class="dropdown-item">
                                                    <i class="ri-eye-fill align-bottom me-2 text-muted"></i>
                                                    View
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#!" class="dropdown-item edit-item-btn">
                                                    <i class="ri-pencil-fill align-bottom me-2 text-muted"></i> 
                                                    Edit
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </tbody><!-- end tbody -->
                    </table><!-- end table -->
                </div><!-- end table responsive -->
            </div><!-- end card body -->
        </div><!-- end card -->
    </div><!-- end row -->

    
@endsection
@section('script')
    <script src="{{ URL::asset('build/js/app.js') }}"></script>
@endsection