@extends('layouts.plantilla')

@section('contenido')
<div class="kt-portlet kt-portlet--mobile">
    <div class="kt-portlet__head kt-portlet__head--lg">
        <div class="kt-portlet__head-label">
            <h3 class="kt-portlet__head-title">Local Datatable
                <small>initialized from javascript array</small>
            </h3>
        </div>
        <div class="kt-portlet__head-toolbar">
            <div class="kt-portlet__head-wrapper">
                <a href="#" class="btn btn-clean kt-hidden">
                    Back to dashboard
                </a>
                <a href="#" class="btn btn-clean btn-bold btn-upper btn-font-sm kt-hidden">
                    <i class="la la-long-arrow-left"></i>
                    Back
                </a>
                <button type="button" class="btn btn btn-outline-brand" data-toggle="modal" data-target="#exampleModalLong">
                    <i class="flaticon2-add-1"></i>
                    New Record
                </button>
                &nbsp;
            </div>
        </div>
    </div>
    <div class="kt-portlet__body">

        <!--begin: Datatable -->
        <table class="table table-striped- table-bordered table-hover table-checkable" id="kt_table_1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Folio</th>
                    <th>Municipio</th>
                    <th>Zona</th>
                    <th>Calle</th>
                    <th>Status</th>
                    <th>Type</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>61715-075</td>
                    <td>Huixquilucan</td>
                    <td>Residencial</td>
                    <td>746 Pine View Junction</td>
                    <td>3</td>
                    <td>2</td>
                    <td nowrap>
                        <button type="button" class="btn btn btn-outline-brand bg-primary flaticon2-file" data-toggle="modal" data-target="#exampleModalPDF">
                        </button>
                        <button type="button" class="btn btn btn-outline-brand bg-success flaticon2-check-mark" data-toggle="modal" data-target="#exampleModalPDF">
                        </button>
                        <button type="button" class="btn btn btn-outline-brand bg-danger flaticon2-delete" data-toggle="modal" data-target="#exampleModalPDF">
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>63629-4697</td>
                    <td>Huixquilucan</td>
                    <td>Popular</td>
                    <td>01652 Fulton Trail</td>
                    <td>6</td>
                    <td>3</td>
                    <td nowrap></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>68084-123</td>
                    <td>Huixquilucan</td>
                    <td>Tradicional</td>
                    <td>2 Pine View Park</td>
                    <td>1</td>
                    <td>2</td>
                    <td nowrap></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>67457-428</td>
                    <td>Huixquilucan</td>
                    <td>Tradicional</td>
                    <td>3050 Buell Terrace</td>
                    <td>1</td>
                    <td>3</td>
                    <td nowrap></td>
                </tr>
            </tbody>
        </table>

<!--end: Datatable -->
    </div>
    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                <form class="kt-form">
                    <div class="kt-portlet__body">
                    <div class="form-group row">
                        <label for="example-text-input" class="col-2 col-form-label">Nombre</label>
                        <div class="col-10">
                            <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-text-input" class="col-2 col-form-label">Apellido Paterno</label>
                        <div class="col-10">
                            <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-text-input" class="col-2 col-form-label">Apellido Materno</label>
                        <div class="col-10">
                            <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-text-input" class="col-2 col-form-label">Calle</label>
                        <div class="col-10">
                            <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-text-input" class="col-2 col-form-label">No Ext</label>
                        <div class="col-10">
                            <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-text-input" class="col-2 col-form-label">No Int</label>
                        <div class="col-10">
                            <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-text-input" class="col-2 col-form-label">Colonia</label>
                        <div class="col-10">
                            <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="example-text-input" class="col-2 col-form-label">Codigo Postal</label>
                        <div class="col-10">
                            <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
                        </div>
                    </div>
                        <div class="form-group">
                            <label for="exampleSelect1">Zona</label>
                            <select class="form-control" id="exampleSelect1">
                                <option>Tradicional</option>
                                <option value="1">Residencial</option>
                                <option value="1">Popular</option>
                            </select>
                        </div>
                        <div class="form-group row">
											<label class="col-form-label col-lg-3 col-sm-12">Multiple File Upload</label>
											<div class="col-lg-4 col-md-9 col-sm-12">
												<div class="dropzone dropzone-default dropzone-brand" id="kt_dropzone_2">
													<div class="dropzone-msg dz-message needsclick">
														<h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>
														<span class="dropzone-msg-desc">Upload up to 10 files</span>
													</div>
												</div>
											</div>
										</div>
                        
                    </div>
                </form>
            </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-brand" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button class="btn btn-brand kt-spinner kt-spinner--v2 kt-spinner--right kt-spinner--sm kt-spinner--dark">Button</button>&nbsp;
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="exampleModalPDF" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                <embed src="assets/media/files/Doc.pdf" frameborder="0" width="100%" height="400px">

            </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-brand" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button class="btn btn-brand kt-spinner kt-spinner--v2 kt-spinner--right kt-spinner--sm kt-spinner--dark">Button</button>&nbsp;
                </div>
            </div>
        </div>
    </div>
</div>

@endsection