@extends('layouts.app')

@section('content')

    <div class="row">
            <h2>Create New Task</h2>

    </div>

    <div class="row">
        <div class="form-row col-12">

                <table style="text-align: center;"  class="table table-bordered table-hover">
                        <thead style="background-color: rgb(80, 120, 131); color: white;font-size: 10px;">
                            <tr>

                                <th>Equipment</th>
                                <th>Duration per unit (min)</th>
                                <th>Task Qty</th>

                            </tr>
                        </thead>
                        @php $i=-1; @endphp
                        @foreach ($equipment_qty as $eq )
                            @php
                                // echo($service_equipment_pivot_ids[$i]);
                                $i +=1;
                            @endphp

                            <input type="hidden" class ="service_equipment_pivot_ids" value="{{$service_equipment_pivot_ids[$i]}}" >
                            <tr style="font-size: 12px;">

                                <td>{{$eq["equipment"]["name"]}}</td>
                                <td>{{$eq["equipment"]["duration"]}}</td>
                                <td  >
                                    <input class="equipment_ids" type="hidden" name="equipment_ids[]" value={{$eq["equipment"]["id"]}}>
                                    <input class="chosen_qty" type="hidden" name="chosen_qty[]" value={{$eq["task_qty"]}}>
                                    {{$eq["task_qty"]}}
                                </td>

                            </tr>
                        @endforeach
                </table>


        </div>

        <div class="form-row col-12">
            <div class="form-group col-md-4 col-lg-4 col-sm-4">
                    <label >Work Date</label>
                    {{-- value={{\Carbon\Carbon::today()}}  --}}
                    @php
                        $today = date('Y-m-d');
                    @endphp
                    <input type='date' id="work_day" name="work_day"  value={{$today}} class="form-control">
            </div>
            <div class="form-group col-md-4 col-lg-4 col-sm-4">
                    <label >Start Time</label>
                    <input type="datetime" id="start_time" name="start_time" value="{{\Carbon\Carbon::createFromTime(8,00)->format('H:i')}}" class="form-control" step="900">
            </div>
            <div class="form-group col-md-4 col-lg-4 col-sm-4">
                    <label >End Time</label>
                    <input type="datetime" id="end_time" name="end_time" value="{{\Carbon\Carbon::createFromTime(16,00)->format('H:i')}}" class="form-control" step="900">
            </div>
        </div>
    </div>
    <hr>

    <div class="row">
        <div class="text-monospace"><p>Capable Engineers:</p></div>
        <div class="ui-widget ui-helper-clearfix col-12 p-2 " style="background-color: #dee2e6; ">

            <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix ">
                @if (count($users)>0)
                    @foreach($users as $user)
                        <li class="ui-widget-content ui-corner-tr">
                            <h5 class="" user_id={{$user->id}}>{{$user->name}}</h5>
                            <h6>{{$user->car? "Have Car":"No Car"}}</h6>
                            <a href='link/to/trash/script/when/we/have/js/off'
                                    title='Assing Engineer'
                                    class='ui-icon ui-icon-person'>Assing Engineer</a>
                        </li>
                    @endforeach
                @else
                    <li  class="ui-widget-content ui-corner-tr" style="min-width: 100%;">
                        <h5 >No Engineers Able to handle all these equipment!</h5>
                        <h5>Try dividing the task to multiple tasks please.</h5>
                    </li>
                @endif


             </ul>
        </div>
            <div id="trash" class="ui-widget-content ui-state-default col-12 mt-1 " style="box-shadow: 0px 0px 5px black;">
                <h6 class="ui-widget-header">Assign Engineers</h6>
            </div>

        <div style="display: block;" class="mt-2">
            <button id="assign_engineers_btn" workorder_id ={{$workorder->id}} class="btn btn-primary">Save</button>
        </div>
    </div>
    <hr>
    <div class="row"  id="timelinesContainer">

        <div class="col-12" style="text-align: center;">
            <p style="font-size: 22px;" class="text-primary">Schedule</p>
        </div>

        <div class="col-12" id="timeline">
        </div>


    </div>

@endsection