@extends('layouts.app', ['activePage' => 'clientes'])

@section('content')
<style>
    .obli::before {
        content: "* ";
        color: red;
        font-weight: bold;
    }

    .dataTables_scrollHeadInner {
        width: 100% !important;
    }

    .dataTables_scrollHeadInner table {
        width: 100% !important;
    }
</style>

<div class="content">
    <div class="container ">
        <div class="row justify-content-md-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card card-nav-tabs card-plain">
                        <div class="card-header card-header-primary">
                            <h4 class="card-title ">Atributos autos </h4>
                            <!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
                            <div class="nav-tabs-navigation">
                                <div class="nav-tabs-wrapper">
                                    <ul class="nav nav-pills nav-pills-primary" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-toggle="tab" href="#home" role="tablist" aria-expanded="true">
                                                Colores
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#profile" role="tablist" aria-expanded="false" onclick="loadGridCalcomonias()" id="calca">
                                                Calcomanias
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#profile2" role="tablist" aria-expanded="false" onclick="loadGridMarcas()" id="marcas1">
                                                Marcas
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="tab" href="#profile3" role="tablist" aria-expanded="false" onclick="loadGridSubMarcas()" id="submarca1">
                                                Sub-Marcas
                                            </a>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                            <hr>
                            <input type="hidden" id="idClienteHidden" @if(isset($cliente)) value="{{ $cliente->Id }}" @else value="" @endif>
                            <div class="card-body ">
                                <div class="tab-content tab-space">
                                    <div class="tab-pane active" id="home" aria-expanded="true">
                                        <div class="row">
                                            <div class="col-4">
                                                <h5>Colores</h5>
                                            </div>
                                            <div class="col-8 text-right">
                                                <button type="button" class="btn btn-primary" id="addC">
                                                    <i class="fa fa-user-plus" aria-hidden="true"></i>
                                                    Nuevo color
                                                </button>
                                                <button type="button" class="btn btn-success " data-bs-toggle="modal" data-bs-target="#md_importar" style="display: none;">
                                                    <i class="fa fa-file-excel-o" aria-hidden="true"></i>
                                                    Importar
                                                </button>
                                            </div>
                                        </div>

                                        <div class="row ">
                                            <table class="table table-bordered table-hover" id="gridColores">
                                                <thead>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">Color</th>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">Acciones</th>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="profile" aria-expanded="false">
                                        <div class="row">
                                            <div class="col-4">
                                                <h5>Calcomanias</h5>

                                            </div>
                                            <div class="col-8 text-right">
                                                <button type="button" class="btn btn-primary" id="addCa">
                                                    <i class="fa fa-user-plus" aria-hidden="true"></i>
                                                    Nueva calcomania
                                                </button>
                                                <button type="button" class="btn btn-success " data-bs-toggle="modal" data-bs-target="#md_importar" style="display: none;">
                                                    <i class="fa fa-file-excel-o" aria-hidden="true"></i>
                                                    Importar
                                                </button>
                                            </div>
                                        </div>
                                        <div class="row ">
                                            <table class="table table-bordered table-hover" id="gridCalcomanias">
                                                <thead>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">Descripción</th>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">Descuento</th>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">Acciónes</th>

                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="profile2" aria-expanded="false">
                                        <div class="row">
                                            <div class="col-4">
                                                <h5>Marcas</h5>

                                            </div>
                                            <div class="col-8 text-right">
                                                <button type="button" class="btn btn-primary" id="addM">
                                                    <i class="fa fa-user-plus" aria-hidden="true"></i>
                                                    Nueva marca
                                                </button>
                                                <!-- <button type="button" class="btn btn-success " data-bs-toggle="modal" data-bs-target="#md_importar" style="display: none;">
                                                    <i class="fa fa-file-excel-o" aria-hidden="true"></i>
                                                    Importar
                                                </button> -->
                                            </div>
                                        </div>
                                        <div class="row ">
                                            <table class="table table-bordered table-hover" id="gridMarcas">
                                                <thead>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">Marca</th>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">Estatus</th>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">Acciónes</th>
                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="profile3" aria-expanded="false">
                                        <div class="row">
                                            <div class="col-4" align="left">
                                                <h5>Sub-Marcas</h5>

                                            </div>
                                            <div class="col-8" align="right">
                                                <button type="button" class="btn btn-primary" id="addSm">
                                                    <i class="fa fa-user-plus" aria-hidden="true"></i>
                                                    Nueva sub-marca
                                                </button>
                                                <button type="button" class="btn btn-success " data-bs-toggle="modal" data-bs-target="#md_importar" style="display: none;">
                                                    <i class="fa fa-file-excel-o" aria-hidden="true"></i>
                                                    Importar
                                                </button>
                                            </div>
                                        </div>
                                        <div class="row ">
                                            <table class="table table-bordered table-hover" id="gridSubMarcas">
                                                <thead>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">Marca</th>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">Sub-marca</th>
                                                    <th class="text-white text-xxs font-weight-bolder opacity-7">Acciónes</th>

                                                </thead>
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="cargandoModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Cargando</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12" align="center">
                        <div class="fa-4x">
                            <i class="fas fa-spinner fa-pulse"></i>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!--COLORES -->
<div class="modal fade" id="modalColores" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="exampleModalLabel">Agregar color</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <input type="hidden" id="idColorHidden">
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="input-group input-group-static mb-4">
                        <label>Color:</label>
                        <input type="text" class="form-control" id="Color">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="agregarColor();">Guardar</button>
            </div>
        </div>
    </div>
</div>
<!--CALCOMANIAS -->
<div class="modal fade" id="modalCalcomanias" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="exampleModalLabel">Agregar calcomania</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <input type="hidden" id="idCalcomaniasHidden">

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="input-group input-group-static mb-4">
                            <label>Descripción:</label>
                            <input type="text" class="form-control" id="Descripcion">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group input-group-static mb-4">
                            <label>Descuento:</label>
                            <input type="text" class="form-control" id="PorcentajeDescuentoMaximo">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="agregarCalcomanias();">Guardar</button>
            </div>
        </div>
    </div>
</div>
<!--MARCAS-->
<div class="modal fade" id="modalMarcas" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="exampleModalLabel">Agregar marca</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <input type="hidden" id="idMarcaHidden">

            <div class="modal-body">
                <div class="col-md-12">
                    <div class="input-group input-group-static mb-4">
                        <label>Marca:</label>
                        <input type="text" class="form-control" id="Marca">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="agregarMarca();">Guardar</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalSubMarcas" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-normal" id="exampleModalLabel">Agregar sub-marca</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                </button>
            </div>
            <input type="hidden" id="idSubMarcaHidden">
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="input-group input-group-static mb-4">
                        <label>Sub-Marca:</label>
                        <input type="text" class="form-control" id="SubMarca">
                    </div>
                    <div class="form-group">
                        <label>Marca:</label>
                        <select class="form-control" id="Marca_id">
                            <option value="0" selected>-[Seleccione una opción]-</option>
                        </select>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" onclick="agregarSubMarca();">Guardar</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }

        });
        loadGridColores();
        loadGridCalcomonias();
         loadGridMarcas();
        loadGridSubMarcas();


    });

    // INICIO COLORES
    $('#addC').click(function() {
        $('#idColorHidden').val('');
        $('#Color').val('');
        $('#modalColores').modal('show');

    });

    function loadGridColores() {
        //$('#').DataTable();
        $('#gridColores').dataTable().fnDestroy();
        $('#gridColores td').css('white-space', 'initial');
        $('#gridColores').DataTable({
            dom: 'Bfrtip',
            lengthMenu: [10, 15, 20, 50, 100],
            processing: true,
            responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            //serverSide: true,

            ajax: {
                url: '{{url("catalogo/atributos-autos/get_colores")}}',
                type: "POST",
            },
            columns: [{
                    data: "Id"
                },
                {
                    data: "Color"
                },
                {
                    data: "acciones"
                },
            ],
            order: [
                [1, "asc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }
            ],


        });
    }


    function agregarColor() {
        var idColorHiden = $('#idColorHidden').val();
        var Color = $('#Color').val();
        if (Color == "") {
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Debes ingresar el nombre del color',

            })
            return false;
        }
        $.ajax({
                url: "{{ url('catalogo/atributos-autos/guardar_color')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: idColorHiden,
                    Color: Color,

                },
            })
            .done(function(resp) {
                console.log(resp);
                if (resp.result == 1) {

                    $('#modalColores').modal('hide');
                    Swal.fire({
                        type: 'success',
                        title: '¡Se ha guardado con éxito!',
                        showConfirmButton: false,
                        timer: 2500
                    });
                    $('#gridColores').DataTable().ajax.reload();
                }

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarColor(id) {
        Swal.fire({
            title: '¿Está seguro de eliminar el color con el ID #' + id + '?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#43586b',
            cancelButtonColor: '#f54337',
            confirmButtonText: '¡Sí, elimínalo!',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                        url: "{{url('catalogo/atributos-autos/deleteColor')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: id,
                        }
                    })
                    .done(function(resp) {
                        console.log("success");
                        if (resp.result == 1) {
                            Swal.fire({
                                type: 'success',
                                title: '¡Se ha eliminado con éxito!',
                                showConfirmButton: false,
                                timer: 2500
                            });
                            $('#gridColores').DataTable().ajax.reload();
                            //loadGridColores();
                        }
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                    });

            }
        })
    }

    function editarColor(id) {
        $.ajax({
                url: "{{url('catalogo/atributos-autos/updateColor')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                }
            })
            .done(function(resp) {
                console.log("success");
                if (resp.result == 1) {
                    $('#modalColores').modal('show')
                    console.log(resp.data)
                    $('#idColorHidden').val(resp.data['Id']);
                    $('#Color').val(resp.data['Color']);

                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }
    //FIN COLOR


    // INICIO CALCOMANIAS
    $('#addCa').click(function() {
        $('#idCalcomaniasHidden').val('');
        $('#Descripcion').val('');
        $('#PorcentajeDescuentoMaximo').val('');
        $('#modalCalcomanias').modal('show');

    });

    function loadGridCalcomonias() {
        //$('#').DataTable();
        $('#gridCalcomanias').dataTable().fnDestroy();
        $('#gridCalcomanias td').css('white-space', 'initial');
        $('#gridCalcomanias').DataTable({
            dom: 'Bfrtip',
            processing: true,
            responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            //serverSide: true,
            ajax: {
                url: '{{url("catalogo/atributos-autos/get_calcamonias")}}',
                type: "POST",
            },
            columns: [{
                    data: "Id"
                },
                {
                    data: "Descripcion"
                },
                {
                    data: "PorcentajeDescuentoMaximo"
                },
                {
                    data: "acciones"
                },
            ],
            order: [
                [0, "asc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }
            ],
            "preDrawCallback": function(settings) {
                $('#calca').removeAttr('onclick');
            }
        });
    }

    function agregarCalcomanias() {
        var idCalcomaniaHidden = $('#idCalcomaniasHidden').val();
        var Descripcion = $('#Descripcion').val();
        var PorcentajeDescuentoMaximo = $('#PorcentajeDescuentoMaximo').val();
        if (Descripcion == "" || PorcentajeDescuentoMaximo == "") {
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Debes ingresar la informacion de la calcomania',
            })
            return false;
        }
        $.ajax({
                url: "{{ url('catalogo/atributos-autos/guardar_calcomania')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: idCalcomaniaHidden,
                    Descripcion: Descripcion,
                    PorcentajeDescuentoMaximo: PorcentajeDescuentoMaximo

                },
            })
            .done(function(resp) {
                console.log(resp);
                if (resp.result == 1) {
                    $('#modalCalcomanias').modal('hide');
                    Swal.fire({
                        type: 'success',
                        title: '¡Se ha guardado con éxito!',
                        showConfirmButton: false,
                        timer: 2500
                    });
                    $('#gridCalcomanias').DataTable().ajax.reload();
                    // loadGridCalcomonias();
                }

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarCalcomanias(id) {
        Swal.fire({
            title: '¿Está seguro de eliminar la calcomania con el ID #' + id + '?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#43586b',
            cancelButtonColor: '#f54337',
            confirmButtonText: '¡Sí, elimínalo!',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                        url: "{{url('catalogo/atributos-autos/deleteCalcomania')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: id,
                        }
                    })
                    .done(function(resp) {
                        console.log("success");
                        if (resp.result == 1) {
                            Swal.fire({
                                type: 'success',
                                title: '¡Se ha eliminado con éxito!',
                                showConfirmButton: false,
                                timer: 2500
                            });
                            $('#gridCalcomanias').DataTable().ajax.reload();
                            // loadGridCalcomonias();
                        }
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                    });

            }
        })
    }

    function editarCalcomanias(id) {
        $.ajax({
                url: "{{url('catalogo/atributos-autos/updateCalcomania')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    id: id,
                }
            })
            .done(function(resp) {
                console.log("success");
                if (resp.result == 1) {
                    $('#modalCalcomanias').modal('show')
                    console.log(resp.data)
                    $('#idCalcomaniasHidden').val(resp.data['Id']);
                    $('#Descripcion').val(resp.data['Descripcion']);
                    $('#PorcentajeDescuentoMaximo').val(resp.data['PorcentajeDescuentoMaximo']);

                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }
    //FIN CALCOMANIAS

    // INICIO MARCAS
    $('#addM').click(function() {
        $('#idMarcaHidden').val('');
        $('#Marca').val('');
        $('#modalMarcas').modal('show');
    });

    function loadGridMarcas() {
        //$('#').DataTable();
        $('#gridMarcas').dataTable().fnDestroy();
        $('#gridMarcas td').css('white-space', 'initial');
        $('#gridMarcas').DataTable({
            dom: 'Bfrtip',
            processing: true,
            responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            "preDrawCallback": function(settings) {
                $('#marcas1').removeAttr('onclick');
            },
            //serverSide: true,
            ajax: {
                url: '{{url("catalogo/atributos-autos/get_marcas")}}',
                type: "POST",
            },
            columns: [{
                    data: "Id"
                },
                {
                    data: "Marca"
                },
                {
                    data: "estatus"
                },
                {
                    data: "acciones"
                },
            ],
            order: [
                [0, "asc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }
            ],
            "preDrawCallback": function(settings) {
                $('#marca1').removeAttr('onclick');
            }
        });
    }

    function agregarMarca() {
        var Id = $('#idMarcaHidden').val();
        var Marca = $('#Marca').val();
        if (Marca == "") {
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Debes ingresar el nombre de la marca',
            })
            return false;
        }
        $.ajax({
                url: "{{ url('catalogo/atributos-autos/guardar_marca')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: Id,
                    Marca: Marca,
                },
            })
            .done(function(resp) {
                console.log(resp);
                if (resp.result == 1) {
                    //$('#cargandoModal').modal('hide');
                    $('#modalMarcas').modal('hide');
                    Swal.fire({
                        type: 'success',
                        title: '¡Se ha guardado con éxito!',
                        showConfirmButton: false,
                        timer: 2500
                    });
                    // loadGridMarcas();
                    //setMarcasToSubmarcas();
                    $('#gridMarcas').DataTable().ajax.reload();

                } else if (resp.result == 3) {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'La marca ya se encuentra registrada',

                    })
                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function setMarcasToSubmarcas() {
        $.ajax({
                url: "{{ url('catalogo/atributos-autos/set_marca')}}",
                type: 'POST',
                dataType: 'json',
            })
            .done(function(resp) {
                console.log(resp);
                if (resp.result == 1) {
                    $.each(resp.data, function(key, value) {
                        $('#Marca_id')
                            .append('<option value="' + value['Id'] + '">' + value['Marca'] + '</option>');
                    });
                    new Choices($('#Marca_id')[0]);

                }

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function actdes(id, estatus) {
        if (estatus == 1) {

            title = '¿Está seguro en activar la marca con el ID #' + id + '?'
            confirmButtonText = '¡Sí, activalo!'

        } else {
            title = '¿Está seguro en desactivar la marca con el ID #' + id + '?'
            confirmButtonText = '¡Sí, desactivalo!'
        }
        Swal.fire({
            title: title,
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#43586b',
            cancelButtonColor: '#f54337',
            confirmButtonText: confirmButtonText,
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                        url: "{{url('catalogo/atributos-autos/delete_marca')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            Id: id,
                            estatus: estatus
                        }
                    })
                    .done(function(resp) {
                        console.log("success");
                        if (resp.result == 1) {
                            type = 'success'
                            title2 = 'Se ha activado correctamente'
                        } else if (resp.result == 2) {
                            type = 'error'
                            title2 = resp.mensaje
                        } else {
                            type = 'success'
                            title2 = 'Se ha desactivado correctamente'
                        }
                        // loadGridMarcas();
                        $('#gridMarcas').DataTable().ajax.reload();

                        Swal.fire({
                            type: type,
                            title: title2,
                            showConfirmButton: false,
                            timer: 2500
                        });
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                    });

            }
        })

    }

    function editarMarca(id) {
        $.ajax({
                url: "{{url('catalogo/atributos-autos/update_marca')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: id,
                }
            })
            .done(function(resp) {
                console.log("success");
                if (resp.result == 1) {
                    $('#modalMarcas').modal('show')
                    console.log(resp.data)
                    $('#idMarcaHidden').val(resp.data['Id']);
                    $('#Marca').val(resp.data['Marca']);

                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }
    //FIN MARCAS

    // INICIO SUBMARCAS
    $('#addSm').click(function() {
        $('#idSubMarcaHidden').val('');
        $('#SubMarca').val('');
        $('#Marca_id').val(0);
        $('#modalSubMarcas').modal('show');
    });

    function loadGridSubMarcas() {
        //$('#').DataTable();
        $('#gridSubMarcas').dataTable().fnDestroy();
        $('#gridSubMarcas').DataTable({
            dom: 'Bfrtip',
            processing: true,
            responsive: true,
            scrollY: '50vh',
            scrollCollapse: true,
            "preDrawCallback": function(settings) {
                $('#submarca1').removeAttr('onclick');
            },
            //serverSide: true,
            ajax: {
                url: '{{url("catalogo/atributos-autos/get_submarcas")}}',
                type: "POST",
            },
            columns: [{
                    data: "Id"
                },
                {
                    data: "Marca"
                },
                {
                    data: "SubMarca"
                },
                {
                    data: "acciones"
                },
            ],
            order: [
                [0, "asc"]
            ],
            buttons: [{
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copiar'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }
            ],
            "preDrawCallback": function(settings) {
                $('#submarca1').removeAttr('onclick');
            }
        });
        setMarcasToSubmarcas();

    }

    function agregarSubMarca() {
        var Id = $('#idSubMarcaHidden').val();
        var Marca_id = $('#Marca_id option:selected').val();
        var SubMarca = $('#SubMarca').val();
        if (SubMarca == "") {
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Debes ingresar la información de la submarca',
            })
            return false;
        }

        if (Marca_id == 0) {
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Debes seleccionar una marcar',
            })
            return false;
        }
        $.ajax({
                url: "{{ url('catalogo/atributos-autos/guardar_submarca')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: Id,
                    Marca_id: Marca_id,
                    SubMarca: SubMarca,
                },
            })
            .done(function(resp) {
                console.log(resp);
                if (resp.result == 1) {

                    $('#modalSubMarcas').modal('hide');
                    Swal.fire({
                        type: 'success',
                        title: '¡Se ha guardado con éxito!',
                        showConfirmButton: false,
                        timer: 2500
                    });
                    // loadGridSubMarcas();
                    $('#gridSubMarcas').DataTable().ajax.reload();

                } else if (resp.result == 3) {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: 'La submarca ya se encuentra registrada',

                    })
                }

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    function eliminarSubMarca(id) {
        Swal.fire({
            title: '¿Está seguro de eliminar la sub-marca con el ID #' + id + '?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#43586b',
            cancelButtonColor: '#f54337',
            confirmButtonText: '¡Sí, elimínalo!',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.value) {
                //$('#cargandoModal').modal()
                $.ajax({
                        url: "{{url('catalogo/atributos-autos/delete_submarca')}}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            Id: id,
                        }
                    })
                    .done(function(resp) {
                        console.log("success");
                        if (resp.result == 1) {
                            Swal.fire({
                                type: 'success',
                                title: '¡Se ha eliminado con éxito!',
                                showConfirmButton: false,
                                timer: 2500
                            });
                            // loadGridSubMarcas();
                            $('#gridSubMarcas').DataTable().ajax.reload();

                        }
                    })
                    .fail(function() {
                        console.log("error");
                    })
                    .always(function() {
                        console.log("complete");
                    });

            }
        })
    }

    function editarSubMarca(id) {
        $.ajax({
                url: "{{url('catalogo/atributos-autos/update_submarca')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    Id: id,
                }
            })
            .done(function(resp) {
                console.log("success");
                if (resp.result == 1) {
                    $('#modalSubMarcas').modal('show')
                    console.log(resp.data)
                    $('#idSubMarcaHidden').val(resp.data['Id']);
                    $('#SubMarca').val(resp.data['SubMarca']);
                    var mar = resp.data['Marca_id']
                    $('#Marca_id option[value=' + mar + ']').prop('selected', true);

                }
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }
    //FIN SUBMARCAS
</script>

@endsection