@php
use App\Models\Customer;
$customers = Customer::all();
$date_from_picker = empty(request()->date_from) ? now()->format('Y-m-d') : request()->date_from;
$date_to_picker = empty(request()->date_to) ? now()->format('Y-m-d') : request()->date_to;
@endphp
@extends('layout.master')
@section('content')

<style>
    .col-form-label {
        font-weight: bold !important;
    }
</style>
    <div class="section-body">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header row">
                        <div class="col-md-10">
                            <h4>QR Code Tag Generator</h4>
                        </div>
                        <div class="col-md-2 d-flex justify-content-end">


                        </div>
                    </div>
                    <form method="POST" action="{{ route('qrcode.store') }}">
                        @csrf

                        <div class="form-group row">
                            <label for="calibration_date" class="col-sm-2 col-form-label" style="padding-left: 25px;">ID No:</label>
                            <div class="col-sm-6">
                               
                               <select name="label_id" id="label_id" class="select_search">

                                <option value="">Select Label</option>
                                @foreach ($labels as $label)
                               
                                    <option value="{{$label->id}}">{{ $label->label_id }}</option>
                                @endforeach
                               </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="calibration_date" class="col-sm-2 col-form-label" style="padding-left: 25px;">Date of Calibration:</label>
                            <div class="col-sm-6">
                                <input type="date" name="calibration_date" style="width: 30%;" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="recalibration_date" class="col-sm-2 col-form-label" style="padding-left: 25px;">Date of Recalibration:</label>
                            <div class="col-sm-6">
                                <input type="date" name="recalibration_date" style="width: 30%;" required>
                            </div>
                        </div>
                
                        <div class="form-group row">
                            <label for="equipment_name" class="col-sm-2 col-form-label" style="padding-left: 25px;">Equipment Name:</label>
                            <div class="col-sm-10" style="width: 100%;">
                                <input type="text" name="equipment_name" style="width: 50%;" required>
                            </div>
                        </div>
                
                        <div class="form-group row">
                            <label for="serial_number" class="col-sm-2 col-form-label" style="padding-left: 25px;">User ID:</label>
                            <div class="col-sm-10" style="width: 100%;">
                                <input type="text" id="user_ids" name="serial_number" style="width: 50%;" required>
                            </div>
                        </div>
                

                        
                        <div class="form-group row">
                            <div class="col-sm-6 text-left" style="padding-left: 25px;">
                              <button type="submit" class="btn btn-primary">Save</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('.select_search').select2();
    
    $('#label_id').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    $("#user_ids").val(optionSelected.text());
});
    
});
</script>
@endpush