@extends('layouts.app')
@push('css_lib')
    <link rel="stylesheet" href="{{asset('vendor/bs-stepper/css/bs-stepper.min.css')}}">
@endpush
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-md-6">
                    <h1 class="m-0 text-bold">{{trans('Pedidos')}} <small class="mx-3">|</small><small>{{trans('Servicios Solicitados')}}</small></h1>
                </div><!-- /.col -->
                <div class="col-md-6">
                    <ol class="breadcrumb bg-white float-sm-right rounded-pill px-4 py-2 d-none d-md-flex">
                        <li class="breadcrumb-item"><a href="{{url('/')}}"><i class="fas fa-tachometer-alt"></i> {{trans('lang.dashboard')}}</a></li>
                        <li class="breadcrumb-item active"><a href="{!! route('pedidos.index') !!}">{{trans('Pedidos')}}</a>
                        </li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
    <div class="content d-flex flex-column flex-md-row">
        <div class="col-12 col-md-8 col-xl-9">
            <div class="card shadow-sm">
                <div class="card-header">
                    <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
                        <li class="nav-item">
                            <a class="nav-link" href="{!! route('pedidos.index') !!}"><i class="fa fa-list mr-2"></i>{{trans('lang.booking_table')}}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="{!! route('pedidos.show',$pedido->id) !!}"><i class="fas fa-calendar-check mr-2"></i>{{trans('lang.booking_details')}}
                            </a>
                        </li>
                        @can('bookings.edit')
                            <li class="nav-item">
                                <a class="nav-link" href="{!! route('pedidos.edit',$pedido->id) !!}"><i class="fas fa-edit mr-2"></i>{{trans('lang.booking_edit')}}
                                </a>
                            </li>
                        @endcan
                    </ul>
                </div>
                <div class="card-body p-0">

                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center bg-light">
                            <b>{{__('lang.booking_status')}}</b>
                            @if($pedido->cancel)
                                <span class="badge bg-danger px-2 py-2">{{__('lang.booking_cancel')}}</span>
                            @endif
                        </li>
                        <li class="bs-stepper list-group-item">
                            <div class="bs-stepper-header" role="tablist">
                                @foreach($pedidoStatuses as $pedidoStatus)
                                    <div class="step">
                                        <span role="tab">
                                            <span class="bs-stepper-circle @if($pedidoStatus->id == $pedido->pedido_status_id) bg-{{setting('theme_color')}} @endif">{{$pedidoStatus->order}}</span>
                                            <span class="bs-stepper-label">{{$pedidoStatus->status}}</span> </span>
                                    </div>
                                    @if (!$loop->last)
                                        <div class="line"></div>
                                    @endif
                                @endforeach
                            </div>
                        </li>
                        <li class="list-group-item bg-light">
                            <b>{{__('lang.booking_id')}} #{{$pedido->id}}</b>
                        </li>
                        <li class="list-group-item bg-light">
                            <b>{{__('Pago Ofrecido')}} ={{$pedido->costo}}</b>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            {!! getMediaColumn($pedido->e_service,'image','rounded shadow-sm border') !!}
                            <div class="d-flex flex-column mx-3">
                                <small>{{__('lang.booking_e_service')}}</small>
                                <span><b>{{$pedido->e_service->name}}</b></span>
                            </div>
                            <div class="d-flex ml-xl-auto flex-column mx-3">
                                @if($pedido->e_service->price_unit == 'fixed' && !empty($pedido->e_service->quantity_unit))
                                    <small>{{__('lang.e_service_quantity')}}</small>
                                    <span><b>{{ $pedido->quantity }} </b><small>{{ $pedido->e_service->quantity_unit }}</small></span>
                               
                                @endif
                            </div>
                            
                        </li>
                        <li class="list-group-item bg-light">
                            <b>{{__('lang.option_plural')}}</b>
                        </li>
                        @foreach($pedido->options as $option)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                {!! getMediaColumn($option,'image','rounded shadow-sm border') !!}
                                <span class="mx-3"><b>{{$option->name}}</b><small class="mx-3"> {{getStripedHtmlColumn($option,'description')}}</small></span>
                                <h6 class="text-bold ml-xl-auto my-1 my-xl-0">{!! getPriceColumn($option) !!}</h6>
                            </li>
                        @endforeach
                    </ul>
                  

                    <!-- Back Field -->
                    <div class="form-group col-12 d-flex flex-column flex-md-row justify-content-md-end justify-content-sm-center border-top pt-4">
                        <a href="#" class="btn btn-default mx-md-2 my-md-0 my-2"> <i class="fas fa-print"></i> {{trans('lang.print')}}
                        </a> <a href="{!! route('pedidos.edit', $pedido->id) !!}" class="btn btn-default mx-md-2">
                            <i class="fas fa-edit"></i> {{trans('lang.booking_edit')}}
                        </a> <a href="{!! route('pedidos.index') !!}" class="btn btn-default mx-md-2">
                            <i class="fas fa-list"></i> {{trans('lang.booking_table')}}
                        </a>

                    </div>

                </div>
            </div>
        </div>
        <div class="col-12 col-md-4 col-xl-3">
            <div class="card shadow-sm">
                <div class="card-header text-bold">
                    {{__('lang.booking_user_id')}}
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex flex-xl-row flex-column justify-content-between align-items-center align-items-xl-start px-0">
                            {!! getMediaColumn($pedido->user,'avatar','img-circle shadow-sm border') !!}
                            <div class="d-flex flex-column align-items-center align-items-xl-start mx-2 my-1 my-xl-0 my-0">
                                <b>{{$pedido->user->name}}</b> <small>{{$pedido->user->email}}</small> <small>{{$pedido->user->phone_number}}</small>
                            </div>
                            <a target="_blank" class="btn btn-sm btn-default ml-xl-auto my-1 my-xl-0" href="{{route('users.edit',$pedido->user->id)}}"><i class="fas fa-user-alt mx-1"></i>{{__('lang.user_profile')}}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card shadow-sm">
                <div class="card-header text-bold">
                    {{__('lang.booking_time')}}
                </div>
                <div class="card-body px-0 py-1">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <b>{{__('lang.booking_booking_at')}}</b> <small>{{$pedido->booking_at}}</small>
                        </li>
                     
                    </ul>
                </div>
            </div>
            <div class="card shadow-sm">
                <div class="card-header text-bold">
                    {{__('lang.booking_address')}}
                </div>
                <div class="card-body  px-0 py-1">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <small>{{$pedido->address->address}}</small>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <b>{{__('lang.address_open_with')}}</b>
                            <a target="_blank" class="btn btn-sm btn-default" href="{{'https://www.google.com/maps/@'.$pedido->address->latitude .','.$pedido->address->longitude.',14z'}}"><i class="fas fa-directions mx-1"></i>{{__('lang.address_google_maps')}}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

    </div>
    <!-- /.modal -->
@endsection
@push('scripts_lib')
    {{--    <script src="{{asset('vendor/bs-stepper/js/bs-stepper.min.js')}}"></script>--}}
@endpush