@extends('form.index')
@section('title', 'Actualizar pedido.')
@section('title-form', 'Actualizar pedido.')
@section('route-form', route('pedidos.update',$pedido->id))
@section('content-form')
@method('PUT')
<div class="row  ">
    <div class="col-4 ">
        <h2>Pedido: {{ $pedido->fecha_creado }}</h2>
    </div>

</div>
<div class="row justify-content-start mb-2  ">
    <div class="col-lg-6  ">
        <div class="card">
            <div class="card-header">
                <a href="{{route('usuarios.show',$pedido->usuario->id )}}">Cliente: {{ $pedido->usuario->nombre.' '.$pedido->usuario->apellido }}</a>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">Correo electrónico: {{ $pedido->usuario->email }}</li>
                <li class="list-group-item">Teléfono: {{ $pedido->usuario->telefono }} </li>
            </ul>
        </div>

    </div>

</div>
    <div class="form-group col-lg-4 pl-0">
        <input type="hidden" name="" id="{{$pedido}}">
		<label for="estado">Estado</label>
		<select class="form-control" name="estado" id="estado" required>
			<option disabled selected>--- Seleccione una Estado ---</option>
			@foreach ($estados as $estado)
				<option value="{{ $estado->id }}" {{ old('estado', $pedido->estado) == $estado->id ? 'selected' : '' }}>{{ $estado->descripcion }}</option>
			@endforeach
		</select>
		@error('sub_categoria')
			<div id="title-feedback" class="is-invalid ">
				<small class="text-danger">*{{ $message }}</small>
			</div>
		@enderror
	</div>
    @if ($pedido->pickup)
        <div class="form-group col-lg-3 pl-0">
            <label>Fecha de retiro</label>
            <input type="date" name="retiro" value="{{ $pedido->pickup->fecha->format('Y-m-d') }}" class="form-control">
        </div>
    @endif

     @if($pedido->envio)
        <div class="form-group col-lg-3 pl-0">
            <label>Fecha de entrega</label>
            <input type="date" name="entrega" class="form-control" value="{{$pedido->envio->fecha->format('Y-m-d')}}">
        </div>
        <div class="col-lg-6 pl-0">
            <span class="text-muted" id="infoDias"></span>
        </div>
        <div class="col-lg-6 pl-0">
            <div class="form-check form-switch mb-2">
                <input class="form-check-input" name="edita_direccion" onchange="editarDireccion()" type="checkbox" role="switch" id="editDireccion">
                <label class="form-check-label" for="editDireccion">Editar Datos de envío</label>
            </div>
            <div id="formEnvio" hidden>
                <div class="form-group col-lg-12 pl-0">
                    <label>Dirección de envío</label>
                    <div class="row p-1">
                        <label class="col-3 text-right mixed">Calle</label>
                        <div class="col-9">
                            <input type="text" name="nombre_calle" value="{{$pedido->usuario->nombre_calle}}" class="form-control">
                        </div>
                    </div>
                    <div class="row p-1">
                        <label class="col-3 text-right mixed">N°</label>
                        <div class="col-9">
                            <input type="text" name="calle_nro" value="{{$pedido->usuario->calle_nro}}" class="form-control">
                        </div>
                    </div>
                    <div class="row p-1">
                        <label class="col-3 text-right mixed">Piso/Depto</label>
                        <div class="col-9">
                            <input type="text" name="direccion2" value="{{$pedido->usuario->direccion2}}" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="form-group col-lg-12 pl-0" hidden>
                    <label>Contacto</label>
                    <div class="row p-1">
                        <label class="col-3 text-right mixed">Teléfono</label>
                        <div class="col-9">
                            <input type="text" name="telefono" class="form-control" value="{{$pedido->usuario->telefono}}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
<button type="submit" class="btn btn-success mb-1 mt-1">Actualizar Pedido</button>

    <script>
        const envio = @json($pedido->envio);
        const dias = @json($dias);
        const semana = [
            {
                dia: 1,
                nombre: 'Lunes'
            },
            {
                dia: 2,
                nombre: 'Martes'
            },
            {
                dia: 3,
                nombre: 'Miércoles'
            },
            {
                dia: 4,
                nombre: 'Jueves'
            },
            {
                dia: 5,
                nombre: 'Viernes'
            }
        ]
        if (dias.length) {
            document.querySelector('#infoDias').innerHTML = `${envio.zona.nombre_subzona} ${envio.sub_zona.nombre}`;
            semana.filter(s => dias.includes(s.dia)).map(d => {
                document.querySelector("#infoDias").innerHTML += ` - ${d.nombre}`
            });
        }
        const editarDireccion = () => {
            const input = document.getElementById('editDireccion');
            input.checked
                ? input.value = 1
                : input.value = 0;
            input.checked 
                ? document.getElementById('formEnvio').hidden = false
                : document.getElementById('formEnvio').hidden = true;
        }
    </script>
@endsection