@extends('layouts.app')

@section('style')
    <link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('autocomplete/jquery-ui.css')}}" rel="stylesheet" type="text/css"/>
@endsection

@section('content')
    <div class="row mt-5">
        <div class="col-12">
            <div class="card-box">
                <div class="text-center">
                    <h4 class="header-title text-6xl">Despacho</h4>

                    <div class="form-group row mb-3 flex justify-center">
                        <label class="col-form-label col-2 text-2xl sub-header pr-0 pl-0">Órdenes abiertas:</label>
                        <div class="col-2">
                            <div class="input-group">
                                <input type="hidden" id="route_search_dispatch" value="{{ route('search_dispatch') }}">
                                <input type="hidden" id="route_dispatching_order" value="{{ route('dispatching_order') }}">
                                <input type="text" class="form-control text-black font-bold" id="datepicker">
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="ti-calendar"></i></span>
                                </div>
                            </div><!-- input-group -->
                        </div>
                    </div>

                </div>

                <div class="row">
{{--                    <div class="col-12">--}}
                        <div class="p-2">

                            <div id="dispatch_container_id" class="container-fluid text-xl font-bold grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4">

                                    <div id="card_control_1">
                                        <div class="card card-inverse text-white" style="background-color: #333; border-color: #333;">
                                            <div class="card-body cuadro_despacho">
                                                <h4 class="card-title text-white">Special title treatment</h4>
                                                <p class="card-text">With supporting text below as a natural lead-in to
                                                    additional content.</p>
                                                <p class="id_codigo_orden hide">1</p>
                                                <a href="#" class="btn btn-dark btn-rounded width-md waves-effect waves-light float-right">Button</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="card_control_2">
                                        <div class="card text-white bg-primary">
                                            <div class="card-body cuadro_despacho">
                                                <h4 class="card-title text-white">Special title treatment</h4>
                                                <p class="card-text">With supporting text below as a natural lead-in to
                                                    additional content.</p>
                                                <p class="id_codigo_orden hide">2</p>
                                                <a href="#" class="btn btn-secondary btn-rounded width-md waves-effect float-right">Button</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="card_control_3">
                                        <div class="card text-white bg-success">
                                            <div class="card-body cuadro_despacho">
                                                <h4 class="card-title text-white">Special title treatment</h4>
                                                <p class="card-text">With supporting text below as a natural lead-in to
                                                    additional content.</p>
                                                <p class="id_codigo_orden hide">3</p>
                                                <a href="#" class="btn btn-warning btn-rounded width-md waves-effect waves-light float-right">Button</a>
                                            </div>
                                        </div>
                                    </div>
                                <!-- end row -->


                                    <div id="card_control_4">
                                        <div class="card text-white bg-info">
                                            <div class="card-body cuadro_despacho">
                                                <h4 class="card-title text-white">Special title treatment</h4>
                                                <p class="card-text">With supporting text below as a natural lead-in to
                                                    additional content.</p>
                                                <p class="id_codigo_orden hide">4</p>
                                                <a href="#" class="btn btn-purple btn-rounded width-md waves-effect waves-light float-right">Button</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="card_control_5">
                                        <div class="card text-white bg-warning">
                                            <div class="card-body cuadro_despacho">
                                                <h4 class="card-title text-white">Special title treatment</h4>
                                                <p class="card-text">With supporting text below as a natural lead-in to
                                                    additional content.</p>
                                                <p class="id_codigo_orden hide">5</p>
                                                <a href="#" class="btn btn-success btn-rounded width-md waves-effect waves-light float-right">Button</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="card_control_6">
                                        <div class="card text-white bg-danger">
                                            <div class="card-body cuadro_despacho">
                                                <h4 class="card-title text-white">Special title treatment</h4>
                                                <p class="card-text">With supporting text below as a natural lead-in to
                                                    additional content.</p>
                                                <p class="id_codigo_orden hide">6</p>
                                                <a href="#" class="btn btn-pink btn-rounded width-md waves-effect waves-light float-right">Button</a>
                                            </div>
                                        </div>
                                    </div>
                                <!-- end row -->


                                    <div id="card_control_7">
                                        <div class="card text-white bg-purple">
                                            <div class="card-body cuadro_despacho">
                                                <h4 class="card-title text-white">Special title treatment</h4>
                                                <p class="card-text">With supporting text below as a natural lead-in to
                                                    additional content.</p>
                                                <p class="id_codigo_orden hide">7</p>
                                                <a href="#" class="btn btn-info btn-rounded width-md waves-effect waves-light float-right">Button</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="card_control_8">
                                        <div class="card text-white bg-pink">
                                            <div class="card-body cuadro_despacho">
                                                <h4 class="card-title text-white">Special title treatment</h4>
                                                <p class="card-text">With supporting text below as a natural lead-in to
                                                    additional content.</p>
                                                <p class="id_codigo_orden hide">8</p>
                                                <a href="#" class="btn btn-danger btn-rounded width-md waves-effect waves-light float-right">Button</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div id="card_control_9">
                                        <div class="card bg-light">
                                            <div class="card-body cuadro_despacho">
                                                <h4 class="card-title text-white">Special title treatment</h4>
                                                <p class="card-text">With supporting text below as a natural lead-in to
                                                    additional content.</p>
                                                <p class="id_codigo_orden hide">9</p>
                                                <a href="#" class="btn btn-dark btn-rounded width-md waves-effect waves-light float-right">Button</a>
                                            </div>
                                        </div>
                                    </div>
                                <!-- end row -->
                            </div>

                        </div>
{{--                    </div>--}}
                </div>
                <!-- end row -->
            </div> <!-- end card-box -->
        </div><!-- end col -->
    </div>
    <!-- end row -->
@endsection

@push('scripts')
    <script src="{{ asset('autocomplete/jquery.js') }}"></script>
    <script src="{{ asset('autocomplete/jquery-ui.js') }}"></script>
    <script src="{{ asset('js/general.js') }}"></script>
    <script src="{{ asset('js/dispatch.js') }}"></script>
    <script src="{{ asset('assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script>
        $(function(){
            $("#datepicker").datepicker({
                minDate: new Date()
            });

            var date = new Date(),
            month = '' + (date.getMonth() + 1),
            day   = '' + date.getDate(),
            year  = date.getFullYear();

            if (month.length < 2) month = '0' + month;
            if (day.length < 2) day = '0' + day;

            var today = [month, day, year].join('/');

            $("#datepicker").val(today);

            verificarOrdenNueva();
            //tener dos funciones. 1- que abra todas las ordenes que estan en base de datos y la segunda que valide si hay nuevas
            setInterval(function(){verificarOrdenNueva();}, 3000);
        });
    </script>

@endpush