@extends('layouts.main')

@section('title', '| Préstamos')
@section('titlePage', 'Crear Préstamo')

@section('page-styles')

@endsection

@section('content')
    <section class="content container-fluid">
        <div class="row">
            <div class="col-md-12">

                @includeif('partials.errors')
                <form method="POST" action="{{ route('prestamos-orders.update', $prestamo) }}" role="form"
                      enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="card card-default">
                        <div class="card-header">
                            <span class="card-title">{{ __('Creando') }} Orden de retiro</span>
                        </div>
                        <div class="card-body">

                            <div class="row g-3">

                                <div class="col-6">
                                    {{ Form::label('Cliente') }}
                                    {{ Form::select('customer_id', $customers, $prestamo->customer_id, ['class' => 'form-select select2' . ($errors->has('customer_id') ? ' is-invalid' : ''), 'placeholder' => 'Elegir cliente', 'required' => 'required', 'id' => 'customer_id']) }}
                                    {!! $errors->first('customer_id', '<div class="invalid-feedback">:message</div>') !!}
                                </div>


                                <div class="col-6">
                                    {{ Form::label('Sucursal') }}
                                    {{ Form::select('branch_office_id', [], $prestamo->branch_office_id, ['class' => 'form-select ' . ($errors->has('branch_office_id') ? ' is-invalid' : ''), 'placeholder' => 'Elegir Sucursal', 'required' => 'required', 'id' => 'branch_office_id']) }}
                                    {!! $errors->first('branch_office_id', '<div class="invalid-feedback">:message</div>') !!}


                                    <a href="#" class="float-end" data-bs-target="#editBranchOffice"
                                       data-bs-toggle="modal" id="showSucursalEdit">
                                        Editar
                                    </a>

                                    <a href="#" data-bs-target="#createBranchOffice" data-bs-toggle="modal"
                                       id="showSucursal">
                                        Añada sucursal
                                    </a>
                                </div>

                                <div class="mb-3 col-6">
                                    <label for="fecha_prestado" class="form-label">Fecha de Préstamo</label>
                                    <input type="date" class="form-control" id="fecha_prestado" name="fecha_prestado"
                                           value="{{ $prestamo->fecha_prestado?->format('Y-m-d') }}" required>
                                </div>

                                <div class="mb-3 col-6">
                                    <label for="fecha_devolucion" class="form-label">Fecha de Devolución</label>
                                    <input type="date" class="form-control" id="fecha_devolucion"
                                           name="fecha_devolucion"
                                           value="{{ $prestamo->fecha_devolucion?->format('Y-m-d') }}" required>
                                </div>

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

                    <div class="card card-default">
                        <div class="card-body">
                            <div class="row row-cols-8">
                                <div class="col">
                                    <div class="col-6">
                                        <div class="card mb-4 text-center">
                                            <a href="#" data-bs-target="#searchProduct" data-bs-toggle="modal">
                                                <div class="card-body h-100">
                                                    <img src="{{asset('app/img/find.png')}}" alt="" class="w-25">
                                                    <h5 class="mt-3 tx-18">Buscar Extintor de Stock para agregar en
                                                        orden</h5>
                                                    <a href="javascript:void(0);" class="text-muted">Añada un
                                                        Extintor</a>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="col-6">
                                        <div class="card mb-4 text-center">
                                            <a href="#" data-bs-target="#searchOrder" data-bs-toggle="modal">
                                                <div class="card-body h-100">
                                                    <img src="{{asset('app/img/find2.png')}}" alt="" class="w-25">
                                                    <h5 class="mt-3 tx-18">Buscar Extintor en Ordenes de Retiro</h5>
                                                    <a href="javascript:void(0);" class="text-muted">Añada un
                                                        Extintor</a>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card card-default">
                        <div class="card-body">

                            <div class="table-responsive">
                                <table class="table mg-b-0 text-md-nowrap table-hover" id="tblOrder">
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th>Cantidad</th>
                                        <th>Categoría del equipo</th>
                                        <th>Nombre</th>
                                        <th>Marca</th>
                                        <th>Clase</th>
                                        <th>Capacidad</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($prestamo->prestamoDetail as $detail)
                                        @if($detail->stock_id)
                                            @include('prestamoOrder.row', ['product' => $detail->stock, 'order' => $prestamo, 'orderDetail' => $detail])
                                        @else
                                            @include('prestamoOrder.rowOrder', ['prestamoOrderDetail' => $detail, 'orderDetail' => $detail->orderDetail])
                                        @endif

                                    @endforeach
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>


                    <div class="card card-default">
                        <div class="card-body">

                            @include('prestamoOrder.form')

                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <div class="modal fade" id="searchOrder">
        <div class="modal-dialog modal-dialog-centered text-center modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Buscar Extintor en Ordenes de retiro</h6>
                    <button aria-label="Close" class="btn-close" data-bs-dismiss="modal">x</button>
                </div>
                <div class="modal-body text-start">
                    <form class="row" id="frmSearchProductOrder">
                        <div class="col-4">
                            <select class="form-select" name="categoria" id="categoria">
                                <option value="">Categor&iacute;a</option>
                                @foreach($categories as $id => $name)
                                    <option value="{{$id}}">{{$name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-4">
                            <select class="form-select" name="capacidad" id="capacidad">
                                <option value="">Capacidad</option>
                                @foreach($capacities as  $name)
                                    <option value="{{$name}}">{{$name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn btn-primary btnSearchProductOrder">Buscar</button>
                        </div>
                    </form>

                    <div class="table-responsive">
                        <table class="table mg-b-0 text-md-nowrap" id="tblSearchProduct">
                            <thead>
                            <tr>
                                <th>No</th>
                                <th>Orden</th>
                                <th>Detalle Orden</th>

                                <th>{{__('Name')}}</th>
                                <th>Marca</th>
                                <th>Categoría</th>
                                <th>Clase</th>
                                <th>Capacidad</th>
                                {{--<th>PSI</th>--}}
                                {{--<th>Alto</th>--}}
                                {{--<th>Ancho</th>--}}
                                {{--<th>Diámetro</th>--}}
                                {{--<th>Peso</th>--}}

                                <th>Cantidad</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody id="tblSearchProduct_tbody">

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createProduct">
        <div class="modal-dialog modal-dialog-centered text-center modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Crear Extintor</h6>
                    <button aria-label="Close" class="btn-close" data-bs-dismiss="modal">x</button>
                </div>
                <form method="POST" action="{{ route('products.store') }}" role="form" enctype="multipart/form-data"
                      id="frmCreateProduct">
                    @csrf
                    <input type="hidden" name="order" value="{{$prestamo->id}}">
                    <div class="modal-body text-start">
                        @include('product.form')
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary">Guardar</button>
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createBranchOffice">
        <div class="modal-dialog modal-dialog-centered text-center modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Crear Sucursal</h6>
                    <button aria-label="Close" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="POST" action="" role="form" enctype="multipart/form-data" id="frmCreateBranch">
                    @csrf

                    <div class="modal-body text-start">
                        @include('branch-office.form')
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary">Guardar</button>
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="searchProduct">
        <div class="modal-dialog modal-dialog-centered text-center modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Buscar Extintor de Stock para agregar en orden</h6>
                    <button aria-label="Close" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-start">
                    <form class="row" id="frmSearchProduct">
                        <div class="col-4">
                            <select class="form-select" name="categoria" id="categoria">
                                <option value="">Categor&iacute;a</option>
                                @foreach($categoriesStock as $name)
                                    <option value="{{$name}}">{{$name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-4">
                            <select class="form-select" name="capacidad" id="capacidad">
                                <option value="">Capacidad</option>
                                @foreach($capacidadStock as $name)
                                    <option value="{{$name}}">{{$name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn btn-primary btnSearchProduct">Buscar</button>
                        </div>
                    </form>

                    <div class="table-responsive">
                        <table class="table mg-b-0 text-md-nowrap" id="tblSearchProduct">
                            <thead>
                            <tr>
                                <th>No</th>

                                <th>{{__('Name')}}</th>
                                <th>Marca</th>
                                <th>Categoría</th>
                                <th>Clase</th>
                                <th>Capacidad</th>
                                {{--<th>PSI</th>--}}
                                {{--<th>Alto</th>--}}
                                {{--<th>Ancho</th>--}}
                                {{--<th>Diámetro</th>--}}
                                {{--<th>Peso</th>--}}

                                <th>Cantidad</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody id="tblSearchProduct_tbody">

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editBranchOffice">
        <div class="modal-dialog modal-dialog-centered text-center modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Editar Sucursal</h6>
                    <button aria-label="Close" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="POST" action="" role="form" enctype="multipart/form-data" id="frmEditBranch">
                    @csrf
                    @method('PUT')
                    <div class="modal-body text-start">
                        <div class="row g-3">

                            <div class="col-6">
                                {{ Form::label(__('Nombre Sucursal'). ' *') }}
                                {{ Form::text('name', "", ['id' => 'name_edit', 'class' => 'form-control' . ($errors->has('name') ? ' is-invalid' : ''), 'placeholder' => __('Nombre Sucursal'), 'required' => '']) }}
                                {!! $errors->first('name', '<div class="invalid-feedback">:message</div>') !!}
                            </div>

                            <div class="col-6">
                                {{ Form::label(__('contact_name'). ' *') }}
                                {{ Form::text('contact_name',  "", ['id' => 'contact_name_edit', 'class' => 'form-control' . ($errors->has('contact_name') ? ' is-invalid' : ''), 'placeholder' => __('contact_name'), 'required' => '']) }}
                                {!! $errors->first('contact_name', '<div class="invalid-feedback">:message</div>') !!}
                            </div>
                            <div class="col-6">
                                {{ Form::label(__('contact_phone')) }}
                                {{ Form::text('contact_phone', "", ['id' => 'contact_phone_edit','class' => 'form-control' . ($errors->has('contact_phone') ? ' is-invalid' : ''), 'placeholder' => __('contact_phone')]) }}
                                {!! $errors->first('contact_phone', '<div class="invalid-feedback">:message</div>') !!}
                            </div>
                            <div class="col-6">
                                {{ Form::label(__('mobile_phone')) }}
                                {{ Form::text('mobile_phone', "", ['id' => 'mobile_phone_edit','class' => 'form-control' . ($errors->has('mobile_phone') ? ' is-invalid' : ''), 'placeholder' => __('mobile_phone')]) }}
                                {!! $errors->first('mobile_phone', '<div class="invalid-feedback">:message</div>') !!}
                            </div>
                            <div class="col-6">
                                {{ Form::label(__('contact_email') . ' *') }}
                                <input type="email" name="contact_email" id="contact_email_edit" value=""
                                       class="form-control {{ ($errors->has('contact_email') ? ' is-invalid' : '')}}"
                                       placeholder="{{__('contact_email')}}">
                                {!! $errors->first('contact_email', '<div class="invalid-feedback">:message</div>') !!}
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary">Guardar</button>
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('page-scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
    <script src="https://unpkg.com/html5-qrcode"></script>
    <script src='https://unpkg.com/leaflet@1.8.0/dist/leaflet.js' crossorigin=''></script>
    <script>


        $(document).on('click', '.frmPhoto', function () {

            var order = $(this).data('order');
            var detail = $(this).data('detail');
            var id = $(this).data('id');

            var fd = new FormData();

            var fileFront = $("#front_" + order + "_" + detail)[0].files[0];
            var fileBack = $("#back_" + order + "_" + detail)[0].files[0];

            fd.append('photo_front', fileFront);
            fd.append('photo_back', fileBack);

            fd.append('_token', '{{ csrf_token() }}');

            $.ajax({
                url: '{{asset('orders-photo')}}' + '/' + order + '/' + detail,
                type: 'post',
                data: fd,
                contentType: false,
                processData: false,
                success: function (response) {
                    sweetAlert("¡Imágenes Cargadas!", response.message, "success");
                    $('#' + id).modal('hide');
                },
            });
        });
        $(document).on('click', '.btnDelete', function () {
            $(this).closest('tr').remove();
        });

        function addProduct(id, idQuantity) {

            var quantity = $("#" + idQuantity).val();

            max = parseInt(quantity);
            if (isNaN(max)) {
                max = 1;
            }

            for (i = 0; i < max; i++) {
                rnd = Math.floor(Math.random() * 1000);
                $.get("{{route('prestamo-detail.add')}}" + "?__cx=" + rnd, {
                    product: id,
                    order: {{$prestamo->id}}
                }, function (response) {
                    if (response.success) {
                        addOrder(response.html)
                        $('#createProduct').modal('hide');
                        sweetAlert("¡Extintor(s) añadido(s)!", response.message, "success");
                    }
                }, 'json');
            }


        }

        function addProduct(id, idQuantity) {

            var quantity = $("#" + idQuantity).val();

            max = parseInt(quantity);
            if (isNaN(max)) {
                max = 1;
            }

            for (i = 0; i < max; i++) {
                rnd = Math.floor(Math.random() * 1000);
                $.get("{{route('prestamo-detail.add')}}" + "?__cx=" + rnd, {
                    product: id,
                    order: {{$prestamo->id}}
                }, function (response) {
                    if (response.success) {
                        addOrder(response.html)
                        $('#createProduct').modal('hide');
                        sweetAlert("¡Extintor(s) añadido(s)!", response.message, "success");
                    }
                }, 'json');
            }


        }

        function addProductOrder(id, idQuantity) {

            var quantity = $("#" + idQuantity).val();

            max = parseInt(quantity);
            if (isNaN(max)) {
                max = 1;
            }

            for (i = 0; i < max; i++) {
                rnd = Math.floor(Math.random() * 1000);
                $.get("{{route('prestamo-detail-order.add')}}" + "?__cx=" + rnd, {
                    orderDetail: id,
                    order: {{$prestamo->id}}
                }, function (response) {
                    if (response.success) {
                        addOrder(response.html)
                        $('#createProduct').modal('hide');
                        sweetAlert("¡Extintor(s) añadido(s)!", response.message, "success");
                    }
                }, 'json');
            }


        }

        $(function () {
            localStorage.removeItem("HTML5_QRCODE_DATA");
            localStorage.clear();
            $("#frmCreateProduct").submit(function (e) {
                e.preventDefault();
                var form = $(this);
                var url = form.attr('action');
                var data = form.serialize();
                var dataArray = form.serializeArray();

                var indexed_array = {};

                $.map(dataArray, function (n, i) {
                    indexed_array[n['name']] = n['value'];
                });

                rnd = Math.floor(Math.random() * 1000);

                $.post(url + "?__cx=" + rnd, data, function (response) {
                    if (response.success) {
                        addOrder(response.html)
                        // addOrder(response.data.id, response.data.name, response.data.category, response.data.brand);
                        $('#createProduct').modal('hide');
                        sweetAlert("¡Extintor añadido!", response.message, "success");
                        if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(function (position) {
                                const latitude = position.coords.latitude;
                                const longitude = position.coords.longitude;


                                var coordinates = {};
                                coordinates.position = {};

                                coordinates.position.lat = latitude;
                                coordinates.position.lng = longitude;
                                coordinates.draggable = true;

                                let index = markers.length;

                                const marker = generateMarker(coordinates, index == 0 ? 0 : index + 1, response.detail);
                                marker.addTo(map).bindPopup(`Detalle ${response.detail} <b>${coordinates.position.lat},  ${coordinates.position.lng}</b>`);
                                map.panTo(coordinates.position);
                                markers.push(marker);
                            });
                        }
                    }
                }, 'json');
            });

            $(".btnSearchProduct").click(function () {
                var form = $("#frmSearchProduct");
                var url = '{{route('productsOrder.search')}}';
                var data = form.serialize();
                var dataArray = form.serializeArray();

                var indexed_array = {};

                $.map(dataArray, function (n, i) {
                    indexed_array[n['name']] = n['value'];
                });

                indexed_array['__cx'] = Math.floor(Math.random() * 1000);
                $.get(url, indexed_array, function (response) {

                    $("#tblSearchProduct tbody").html(response);

                });
            });

            $(".btnSearchProductOrder").click(function () {
                var form = $("#frmSearchProductOrder");
                var url = '{{route('prestamoOrder.search')}}';
                var data = form.serialize();
                var dataArray = form.serializeArray();

                var indexed_array = {};

                $.map(dataArray, function (n, i) {
                    indexed_array[n['name']] = n['value'];
                });

                indexed_array['__cx'] = Math.floor(Math.random() * 1000);
                $.get(url, indexed_array, function (response) {

                    $("#tblSearchProduct tbody").html(response);

                });
            });

            var client = $("#customer_id").val();

            if (client) {
                $("#showSucursal").show();
                $("#showSucursalEdit").show();
                var url = '{{route('branchs.load')}}';
                var data = {selected: "{{$prestamo->branch_office_id}}"};
                $.get(url + "/" + client, data, function (response) {
                    $("#branch_office_id").html(response);
                });

            } else {
                $("#showSucursal").hide();
                $("#showSucursalEdit").hide();
            }

            $("#showSucursalEdit").click(function () {
                var branch = $("#branch_office_id").val();

                if (branch == "") {
                    sweetAlert("¡Sucursal no seleccionada!", "Por favor seleccione una sucursal", "error");
                    return;
                }

                var url = "{{url('/load-branch')}}" + "/" + branch;

                $.get(url, function (response) {
                    $("#name_edit").val(response.name);
                    $("#contact_name_edit").val(response.contact_name);
                    $("#contact_phone_edit").val(response.contact_phone);
                    $("#mobile_phone_edit").val(response.mobile_phone);
                    $("#contact_email_edit").val(response.contact_email);
                    $("#editBranchOffice").modal('show');
                });


            });


            $("#customer_id").change(function () {
                var customer = $(this).val();

                if (customer == "") {
                    $("#showSucursal").hide();
                    $("#showSucursalEdit").hide();
                    $("#branch_office_id").html("");
                    return;
                }


                var url = '{{route('branchs.load')}}';
                var data = {};
                $.get(url + "/" + customer, data, function (response) {
                    $("#branch_office_id").html(response);
                    $("#showSucursal").show();
                    $("#showSucursalEdit").show();
                });
            });

            $("#frmEditBranch").submit(function (e) {
                e.preventDefault();
                var branch = $("#branch_office_id").val();
                var form = $(this);
                var url = "{{ route('customers.index') }}" + "/" + $("#customer_id").val() + "/branch-offices/" + branch;
                var data = form.serialize();
                var dataArray = form.serializeArray();

                var indexed_array = {};

                $.map(dataArray, function (n, i) {
                    indexed_array[n['name']] = n['value'];
                });

                rnd = Math.floor(Math.random() * 1000);

                $.post(url + "?__cx=" + rnd, data, function (response) {
                    if (response.success) {
                        var client = $("#customer_id").val();

                        if (client) {
                            var url = '{{route('branchs.load')}}';
                            var data = {selected: "{{$prestamo->branch_office_id}}"};
                            $.get(url + "/" + client, data, function (response) {
                                $("#branch_office_id").html(response);
                            });
                        }

                        sweetAlert("¡Sucursal actualizada!", response.message, "success");
                    }
                }, 'json');
            });

            $("#frmCreateBranch").submit(function (e) {
                e.preventDefault();
                $("#hidden_customer_id").val($("#customer_id").val());

                var form = $(this);
                var url = "{{ route('customers.index') }}" + "/" + $("#customer_id").val() + "/branch-offices";
                var data = form.serialize();
                var dataArray = form.serializeArray();

                var indexed_array = {};

                $.map(dataArray, function (n, i) {
                    indexed_array[n['name']] = n['value'];
                });

                rnd = Math.floor(Math.random() * 1000);

                $.post(url + "?__cx=" + rnd, data, function (response) {
                    if (response.success) {
                        var client = $("#customer_id").val();

                        if (client) {
                            var url = '{{route('branchs.load')}}';
                            var data = {selected: "{{$prestamo->branch_office_id}}"};
                            $.get(url + "/" + client, data, function (response) {
                                $("#branch_office_id").html(response);
                            });
                        }

                        sweetAlert("¡Sucursal añadida!", response.message, "success");
                    }
                }, 'json');
            });
        });

        function addOrder(html) {
            $("#tblOrder").append(html);
        }
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            let fechaPrestado = document.getElementById("fecha_prestado");
            let fechaDevolucion = document.getElementById("fecha_devolucion");

            fechaPrestado.addEventListener("change", function () {
                fechaDevolucion.min = fechaPrestado.value;
            });
        });
    </script>

@endsection