@section('css')
<style>
    .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next,.ui-datepicker-calendar,.ui-datepicker-month {
        display: none;
    }
    .input_row {
        font-size: 14px;
        display: inline-block;
    }
</style>
@endsection

<div class="card card-primary col-lg-12 p-1 m-0 mb-3">
    <div class="card-body m-0 p-0">
        <div class="row m-2">
            
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="equipment_id"><span style="color:red">*</span> {{ __('Equipment')}}</label>
                    <div class="input-group mb-3">
                        <select required id="equipment_id" name="equipment_id" class="form-control select2" @if(isset($eluent_monitoring)) disabled @endif>
                            <option value=""></option>
                            @foreach($equipment as $e)
                            <option value="{{$e->id}}" @if(isset($eluent_monitoring) && $eluent_monitoring->equipment_id == $e->id) selected @endif>{{$e->name}}</option>
                            @endforeach
                        </select>          
                    </div>
                </div>
            </div>

        </div>

        <div class="row m-1">

            <div class="col-sm-3">
                <div class="form-group">
                    <label for="location">{{ __('Location')}}</label>
                    <div class="input-group mb-3">
                           <input type="text" disabled name="location" id="location" class="form-control" @if(isset($eluent_monitoring)) value="{{$eluent_monitoring->equipment->location->location}}" @endif>   
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="form-group">
                    <label for="property_no">{{ __('Equipment / Property Number')}}</label>
                    <div class="input-group mb-3">
                          <input type="text" disabled name="property_no" id="property_no" class="form-control" @if(isset($eluent_monitoring)) value="{{$eluent_monitoring->equipment->property_no}}" @endif>    
                    </div>
                </div>
            </div>

        </div>

        <div class="row m-1">
            
            <div class="col-sm-6">
                <div class="form-group">
                    <label for="year"><span style="color:red">*</span> {{ __('Year')}}</label>
                    <div class="input-group mb-3">
                        @if(isset($eluent_monitoring))
                        <input type="text" class="form-control" disabled value="{{date('Y', strtotime($eluent_monitoring->date))}}">  
                        @else
                        <input required type="text" id="year" class="form-control">  
                        <input type="hidden" name="date" id="year_hidden">
                        @endif  
                    </div>
                </div>
            </div>

        </div>

        <div class="row m-2">
            <div class="card col-sm-6 p-0">
                <div class="card-header" style="padding: 6px">
                    <h6 class="text-center m-0 p-0" style="display: inline-block;">
                        {{ __('Eluent A') }}
                    </h6>
                    <a id="add_form_row_a" class="btn btn-primary btn-sm float-right" style="padding: 0px 6px;">
                        <i class="fa fa-plus"></i> {{__(' Add')}} 
                    </a>
                </div>
                <div class="card-body m-0 p-0" style="overflow-x: auto">
                    <table id="table_a" class="table">
                        <thead>
                            <th class="p-1" style="width: 13%;">Date Prepared</th>
                            <th class="p-1" style="width: 13%;">Volume Prepared</th>
                            <th class="p-1">Prepared By</th>
                            <th class="p-1" style="width: 13%;">Date Consumed</th>
                            <th class="p-1">Volume Consumed</th>
                            <th class="p-1">Remarks</th>
                            <th style="width: 3%"></th>
                        </thead>
                        <tbody id="table_body_a">
                            @if(isset($eluent_monitoring))
                            @foreach($eluent_monitoring->a_records as $record)
                            <tr>
                                <input type="hidden" name="row_a_ex[{{$record->id}}][id]" value="{{$record->id}}">
                                <td class="p-1">
                                    <input type="date" class="form-control date input_row form_date" name="row_a_ex[{{$record->id}}][date_prepared]" value="{{$record->date_prepared}}">
                                </td>
                                <td class="p-1">
                                    <input style="min-width: 60px;" type="text" class="form-control vol_prepared input_row" name="row_a_ex[{{$record->id}}][volume_prepared]" value="{{$record->volume_prepared}}">
                                </td>
                                <td class="p-1">
                                    <select name="row_a_ex[{{$record->id}}][prepared_by]" class="form-control user_a input_row">
                                        <option value="">&nbsp;</option>
                                    @foreach($branch_users as $b)
                                        <option value="{{$b->user->id}}" @if($b->user->id == $record->prepared_by) selected @endif>{{$b->user->name}}  {{$b->user->last_name}}</option>
                                    @endforeach
                                    </select>
                                </td>
                                <td class="p-1">
                                    <input type="date" class="form-control date_consumed form_date input_row" name="row_a_ex[{{$record->id}}][date_consumed]" value="{{$record->date_consumed}}">
                                </td>
                                <td class="p-1">
                                    <input style="min-width: 60px;" type="text" class="form-control vol_consumed input_row" name="row_a_ex[{{$record->id}}][volume_consumed]" value="{{$record->volume_consumed}}">
                                </td>
                                <td class="p-1">
                                    <textarea style="min-width: 120px;" class="form-control remarks input_row" name="row_a_ex[{{$record->id}}][remarks]" rows="1">{{$record->remarks}}</textarea>
                                </td>
                                <td class="p-0"style="text-align: center; vertical-align: middle;">
                                </td>
                            </tr>
                            @endforeach
                            @endif
                            <tr id="form_row_a" class="a_row d-none">
                                <td class="p-1">
                                    <input type="date" class="form-control date input_row form_date" name="[date_prepared]">
                                </td>
                                <td class="p-1">
                                    <input style="min-width: 60px;" type="text" class="form-control vol_prepared input_row" name="[volume_prepared]">
                                </td>
                                <td class="p-1">
                                    <select name="[prepared_by]" class="form-control user_a input_row">
                                        <option value="">&nbsp;</option>
                                    @foreach($branch_users as $b)
                                        <option value="{{$b->user->id}}">{{$b->user->name}}  {{$b->user->last_name}}</option>
                                    @endforeach
                                    </select>
                                </td>
                                <td class="p-1">
                                    <input type="date" class="form-control date_consumed form_date input_row" name="[date_consumed]">
                                </td>
                                <td class="p-1">
                                    <input style="min-width: 60px;" type="text" class="form-control vol_consumed input_row" name="[volume_consumed]">
                                </td>
                                <td class="p-1">
                                    <textarea style="min-width: 120px;" class="form-control remarks input_row" name="[remarks]" rows="1"></textarea>
                                </td>
                                <td class="p-0"style="text-align: center; vertical-align: middle;">
                                    <button type="button" class="btn btn-danger btn-sm delete_form_row" style="padding: 3px">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div> 
            </div>
            <div class="card col-sm-6 p-0">
                <div class="card-header" style="padding: 6px">
                    <h6 class="text-center m-0 p-0" style="display: inline-block;">
                        {{ __('Eluent B') }}
                    </h6>
                    <a id="add_form_row_b" class="btn btn-primary btn-sm float-right" style="padding: 0px 6px;">
                        <i class="fa fa-plus"></i> {{__(' Add')}} 
                    </a>
                </div>
                <div class="card-body m-0 p-0" style="overflow-x: auto">
                    <table id="table_b" class="table">
                        <thead>
                            <th class="p-1" style="width: 13%;">Date Prepared</th>
                            <th class="p-1">Volume (Top-up)</th>
                            <th class="p-1">Prepared By</th>
                            <th class="p-1" style="width: 13%;">Date Consumed</th>
                            <th class="p-1">Volume Consumed</th>
                            <th class="p-1">Remarks</th>
                            <th style="width: 3%"></th>
                        </thead>
                        <tbody id="table_body_b">
                            @if(isset($eluent_monitoring))
                            @foreach($eluent_monitoring->b_records as $record)
                            <tr>
                                <input type="hidden" name="row_b_ex[{{$record->id}}][id]" value="{{$record->id}}">
                                <td class="p-1">
                                    <input type="date" class="form-control date input_row form_date" name="row_b_ex[{{$record->id}}][date_prepared]" value="{{$record->date_prepared}}">
                                </td>
                                <td class="p-1">
                                    <input style="min-width: 60px;" type="text" class="form-control vol_prepared input_row" name="row_b_ex[{{$record->id}}][volume_top_up]" value="{{$record->volume_top_up}}">
                                </td>
                                <td class="p-1">
                                    <select name="row_b_ex[{{$record->id}}][prepared_by]" class="form-control user_a input_row">
                                        <option value="">&nbsp;</option>
                                    @foreach($branch_users as $b)
                                        <option value="{{$b->user->id}}" @if($b->user->id == $record->prepared_by) selected @endif>{{$b->user->name}}  {{$b->user->last_name}}</option>
                                    @endforeach
                                    </select>
                                </td>
                                <td class="p-1">
                                    <input type="date" class="form-control date_consumed form_date input_row" name="row_b_ex[{{$record->id}}][date_consumed]" value="{{$record->date_consumed}}">
                                </td>
                                <td class="p-1">
                                    <input style="min-width: 60px;" type="text" class="form-control vol_consumed input_row" name="row_b_ex[{{$record->id}}][volume_consumed]" value="{{$record->volume_consumed}}">
                                </td>
                                <td class="p-1">
                                    <textarea style="min-width: 120px;" class="form-control remarks input_row" name="row_b_ex[{{$record->id}}][remarks]" rows="1">{{$record->remarks}}</textarea>
                                </td>
                                <td class="p-0"style="text-align: center; vertical-align: middle;">
                                </td>
                            </tr>
                            @endforeach
                            @endif
                            <tr id="form_row_b" class="b_row d-none">
                                <td class="p-1">
                                    <input type="date" class="form-control date input_row form_date" name="[date_prepared]">
                                </td>
                                <td class="p-1">
                                    <input style="min-width: 60px;" type="text" class="form-control vol input_row" name="[volume_top_up]">
                                </td>
                                <td class="p-1">
                                    <select name="[prepared_by]" class="form-control user_b input_row">
                                        <option value="">&nbsp;</option>
                                    @foreach($branch_users as $b)
                                        <option value="{{$b->user->id}}">{{$b->user->name}}  {{$b->user->last_name}}</option>
                                    @endforeach
                                    </select>
                                </td>
                                <td class="p-1">
                                    <input type="date" class="form-control date_consumed form_date input_row" name="[date_consumed]">
                                </td>
                                <td class="p-1">
                                    <input style="min-width: 60px;" type="text" class="form-control vol_consumed input_row" name="[volume_consumed]">
                                </td>
                                <td class="p-1">
                                    <textarea style="min-width: 120px;" class="form-control remarks input_row" name="[remarks]" rows="1"></textarea>
                                </td>
                                <td class="p-0"style="text-align: center; vertical-align: middle;">
                                    <button type="button" class="btn btn-danger btn-sm delete_form_row" style="padding: 3px">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>  
</div>

<table class="table d-none">
    
</table>

@section('scripts')
    <script src="{{url('js/admin/eluent_monitoring.js')}}"></script>
@endsection