@extends('layouts.app')

@section('css')

<link rel="stylesheet" href="{!! asset('files_custom') !!}/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="{!! asset('files_custom') !!}/bower_components/select2/css/select2.min.css"/>

<style>

    .select2-container{
        width:100% !important;
    }

    label{
        margin-bottom: 25px !important;
    }

    .card {
        position: relative;
        height: 80vh;
        overflow: auto;
    }

    .botonera {
        position: sticky;
        top: 0;
        background-color: white;
        z-index: 12;
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
    }

    .back-item{
        position: relative;
        padding: 12px;
        border: 1px solid #e1e1e1;
        border-radius: 12px;
        background: #fafafa;
    }

    .item {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 15px;
    }

    .item .item-select,
    .item .item-cantidad {
        display: flex;
        flex-direction: column;
    }


    .input-group-cant {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .input-group-cant .btn {
        background: none;
        border-radius: 10px;
        color: #00c88b;
        width: 32px;
        height: 32px;
        padding: 0;
    }

    .deleteElement {
        position: absolute;
        top: 5px;
        right: 5px;
        background: none;
        border: none;
        color: #fd2626;
        font-size: 28px;
        z-index: 10;
    }

    .item.producto-item,
    .item.consumible-item {
        position: relative;
        display: flex;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
    }

    .item-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .item-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-width: 100%;
        overflow: hidden;
    }

    .item-image {
        width: 120px;
        height: 120px;
        object-fit: contain;
        border-radius: 10px;
        border: 1px solid #ddd;
        background: #fff;
        padding: 5px;
    }

    .item-price {
        text-align: center;
        font-weight: bold;
        margin-top: 5px;
    }

    @media (min-width: 1200px) and (max-width: 1499px)  {
        .col-xl-2 {
            max-width: 50%;        
        }
    }

    @media (min-width: 1500px) and (max-width: 1800px)  {
        .col-xl-2 {
            max-width: 33%;        
        }
    }

    @media (min-width: 1801px) and (max-width: 2500px)  {
        .col-xl-2 {
            max-width: 25%;        
        }
    }

</style>

@endsection

@section('content')
<div class="page-header">
    <h3 class="page-title text-uppercase">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-shopping menu-icon"></i>
        </span> productos </h3>

    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item active" aria-current="page"><a href="{!! route('pedidos.index') !!}">pedidos</a></li>   
            <li class="breadcrumb-item active" aria-current="page">
                <span></span>crear nuevo <i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
            </li>
        </ul>
    </nav>
</div>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="clearfix">
                    <h4 class="card-title float-left text-uppercase">crear pedido </h4>
                </div>
                <div class="espacio_vertical"></div>
                @include('adminlte-templates::common.errors')
                <form action="{{route('pedidos.store')}}" method="POST">
                    <div class="botonera">
                        <div>
                            <button type="button" class="btn btn-primary_local" id="add-consumible-btn">Añadir Consumible</button>
                            <button type="button" class="btn btn-primary_local" id="add-producto-btn">Añadir Producto</button>
                        </div>

                        <div>
                            <button type="submit" class="btn btn-primary_local" id="btnCrearClient">Crear</button>
                            <a href="{!! url('/pedidos') !!}" class="btn btn-secondary" id="btnCancelarClient">cancelar</a>
                        </div>
                    </div>
                    @csrf
                    @include('pedidos.fields')
                </form>                
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="{!! asset('files_custom/assets/input-mask/jquery.inputmask.js')!!}"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="{!! asset('files_custom') !!}/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/select2/js/select2.full.min.js"></script>
<script type="text/javascript" src="{!! asset('files_custom') !!}/bower_components/select2/js/select2.full.min.js"></script>
<script>
    $('.file-upload-browse').on('click', function() {
      var file = $(this).parent().parent().parent().find('.file-upload-default');
      file.trigger('click');
    });
    $('.file-upload-default').on('change', function() {
      $(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
    });
    $("#precio").blur(function(){
        $("#precio").val(numeral($("#precio").val()).format('0,0.0'));
    });

    $('#caducidad').inputmask({
        mask: "99/99/9999"
    });

</script>

 <script type="text/javascript">
        $('.category-checkbox').on('change', function() {
            if ($(this).data('category') === 'all') {
                $('.category-checkbox').not(this).each(function() {
                    $(this).prop('checked', false);
                    $(this).closest('label').removeClass('active');
                });
            } else {
                $('#all-btn').prop('checked', false);
                $('#all-btn').closest('label').removeClass('active');
            }
        });
    </script>

    <script>
        $(document).ready(function() {
            // Initialize select2 for initial selects
            $('#selectProducto').select2({
                placeholder: 'Busca un producto...',
                allowClear: true,
                width: '100%'
            });
            $('#selectConsumible').select2({
                placeholder: 'Busca un consumible...',
                allowClear: true,
                width: '100%'
            });

            // function updateCategoryCount() {
            //     const count = $('input[name="categoriasProducto[]"]:checked:not([value="all"])').length;
            //     const countSpan = $('#category-count');
            //     const collapse = $('#product-filters');

            //     if (collapse.hasClass('show')) {
            //         countSpan.text('');
            //     } else {
            //         countSpan.text(` (${count})`);
            //     }
            // }

            // $('#product-filters').on('show.bs.collapse hide.bs.collapse', updateCategoryCount);

            // $('.category-checkbox').on('change', updateCategoryCount);

            // updateCategoryCount();

            $(document).on('change', '#productos-container select[name="producto[]"]', function() {
                console.log('Cambio detectado en el select de productos');
                const imageSrc = $(this).find(':selected').data('image');
                const productImage = $(this).closest('.item').find('.product-image');

                if (imageSrc) {
                    productImage.attr('src', '/img_productos/' + imageSrc);
                } else {
                    productImage.attr('src', '/img_productos/default.png');
                }
                productImage.show();

                const price = $(this).find(':selected').data('price') || 0;
                $(this).closest('.item').find('.price-value').text(numeral(price).format('0,0.00'));
            });

            $('#add-producto-btn').on('click', function() {
                const newRow = `
                <div class="col-sm-12 col-md-12 col-lg-6 col-xl-2 mb-4">
                    <div class="back-item">
                        <button type="button" class="deleteElement remove-row">
                                <i class="mdi mdi-minus-circle"></i>
                        </button>
                        <div class="item producto-item">
                            <div class="item-left">
                                <img class="item-image product-image" src="/img_productos/default.png">
                                <div class="item-price">Precio: $<span class="price-value">0.00</span></div>
                            </div>

                            <div class="item-right">
                                <div class="item-select">
                                    <label>Producto:</label>
                                    <select name="producto[]" class="selectProducto">
                                        <option value="">Selecciona un producto</option>
                                        @foreach($productos as $producto)
                                            <option value="{{ $producto->id }}" data-image="{{ $producto->imagen }}" data-price="{{ $producto->precio }}">
                                                {{ $producto->nombre }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="item-cantidad">
                                    <label>Cantidad:</label>
                                    <div class="input-group-cant">
                                        <button class="btn minus-btn" type="button">-</button>
                                        <input type="number" class="form-control cantidad-input"
                                            name="cantidad_producto[]" value="1" min="1">
                                        <button class="btn plus-btn" type="button">+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                `;

                $('#productos-container .row').append(newRow);

                $('#productos-container .selectProducto').last().select2({
                    placeholder: 'Busca un producto...',
                    allowClear: true,
                    width: '100%'
                });
            });


           $('#add-consumible-btn').on('click', function() {
                  const newRow = `
                  <div class="col-sm-12 col-md-12 col-lg-6 col-xl-2 p-2">
                     <div class="back-item">
                         <button type="button" class="deleteElement remove-row">
                                 <i class="mdi mdi-minus-circle"></i>
                         </button>
                         <div class="item consumible-item">
                             <div class="item-left">
                                 <img class="item-image consumible-image" src="/img_productos/default.png">
                             </div>

                             <div class="item-right">
                                 <div class="item-select">
                                     <label>Consumible:</label>
                                     <select name="consumible[]" class="selectConsumible">
                                         <option value="">Selecciona un consumible</option>
                                         @foreach($consumibles as $consumible)
                                             <option value="{{ $consumible->id }}" data-image="{{ $consumible->imagen }}" data-price="{{ $consumible->precio }}">
                                                 {{ $consumible->nombre }}
                                             </option>
                                         @endforeach
                                     </select>
                                 </div>

                                 <div class="item-cantidad">
                                     <label>Cantidad:</label>
                                     <div class="input-group-cant">
                                         <button class="btn minus-btn" type="button">-</button>
                                         <input type="number" class="form-control cantidad-input"
                                             name="cantidad_consumible[]" value="1" min="1">
                                         <button class="btn plus-btn" type="button">+</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                  </div>
                  `;

                 $('#consumibles-container .row').append(newRow);

                 $('#consumibles-container .selectConsumible').last().select2({
                     placeholder: 'Busca un consumible...',
                     allowClear: true,
                     width: '100%'
                 });
             });


         // Imagen producto
            $(document).on('change', 'select[name="producto[]"]', function () {
                const img = $(this).find(':selected').data('image');
                const tag = $(this).closest('.item').find('.product-image');
                tag.attr('src', img ? '/img_productos/' + img : '/img_productos/default.png');
            });

            // Imagen consumible
            $(document).on('change', 'select[name="consumible[]"]', function () {
                const img = $(this).find(':selected').data('image');
                const tag = $(this).closest('.item').find('.consumible-image');
                tag.attr('src', img ? '/img_consumibles/' + img : '/img_consumibles/default.png');
            });

            // Eliminar
            $(document).on('click', '.remove-row', function () {
                $(this).closest('.back-item').remove();
            });

            // Cantidades
            $(document).on('click', '.minus-btn', function () {
                const input = $(this).siblings('.cantidad-input');
                let v = parseInt(input.val());
                if (v > 1) input.val(v - 1);
            });

            $(document).on('click', '.plus-btn', function () {
                const input = $(this).siblings('.cantidad-input');
                let v = parseInt(input.val());
                input.val(v + 1);
            });
        });
    </script>

</script>
@endsection