@extends('layout.master')

@section('main_content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-sm-6">
                    <h3>Create Request</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}"><i data-feather="home"></i></a></li>
                        <li class="breadcrumb-item">Requests</li>
                        <li class="breadcrumb-item active">Create</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid starts-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <form class="theme-form" action="{{ route('reqs.store') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf

                            <div class="row mb-3">
                                <label for="select2Multiple" class="col-sm-2 col-form-label">Choose a Product</label>
                                <div class="col-sm-10">
                                    <select class="select2-multiple form-control" name="items[]" multiple="multiple"
                                        id="select2Multiple">
                                        @foreach ($items as $item)
                                            <option value="{{ $item->IID }}">Description: {{ $item->IDescription }} -
                                                Product Number: {{ $item->INumber }} - Serial Number:
                                                {{ $item->ISerialNumber }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                                                
                            <div class="row mb-3">
                                <label for="user" class="col-sm-2 col-form-label">User</label>
                                <div class="col-sm-10">
                                    <input type="text" value="{{ auth()->user()->name }}" class="form-control"
                                        name="user" id="user" disabled>
                                </div>
                                <input type="hidden" id="user_id" name="user_id" value="{{ auth()->user()->id }}">
                            </div>

                            <div class="row mb-3">
                                <label class="col-sm-2 col-form-label">on behalf of</label>
                                <div class="col-sm-10">
                                    <select class="form-select select2-client" name="behalf" id="behalf">
                                        <option value=" ">-</option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }} {{ $user->lastname }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>


                            <div class="row mb-3">
                                <label class="col-sm-2 col-form-label">Position</label>
                                <div class="col-sm-10">
                                    <select class="form-select" aria-label="Default select example" name="pos"
                                        id="pos" required>
                                        <option value=" ">-</option>
                                        <option value="Sales">Sales</option>
                                        <option value="Marketing">Marketing</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label class="col-sm-2 col-form-label">Client</label>
                                <div class="col-sm-10">
                                    <select class="form-select select2-client" name="client_id" id="client_id">
                                        @foreach ($clients as $client)
                                            <option value="{{ $client->CID }}">{{ $client->CID }} -
                                                {{ $client->CCompany }}</option>
                                        @endforeach
                                    </select>
                                    <center><a href="{{ route('clients.create') }}"><b>Add new Client</b></a></center>
                                </div>
                            </div>


                            <div class="row mb-3">
                                <label for="inputDate" class="col-sm-2 col-form-label">Request Date</label>
                                <div class="col-sm-10">
                                    <center><label for="start_date"><b> From </b></label></center>
                                    <input type="datetime-local" class="form-control" id="start_date" name="start_date"
                                        value="{{ now() }}" min="{{ now() }}">

                                    <center><label for="end_date"><b> To <b></label></center>
                                    <input type="datetime-local" class="form-control" id="end_date" name="end_date"
                                        value="{{ now() }}" min="{{ now() }}">
                                </div>

                            </div>

                            <div class="row mb-3">
                                <label for="system_date" class="col-sm-2 col-form-label">System Date</label>
                                <div class="col-sm-10">
                                    <input type="text" value="{{ now() }}" class="form-control"
                                        name="system_date" id="system_date" readonly>
                                </div>
                            </div>

                    </div>
                    <div class="card-footer text-end">
                        <button class="btn btn-primary" type="submit">Submit</button>
                        <button class="btn btn-secondary">Cancel</button>
                    </div>
                </div>
            </div>
            </form>

        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/tooltip-init.js') }}"></script>

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"
        integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function() {
            // Select2 Multiple
            $('.select2-multiple').select2({
                placeholder: "Select",
                allowClear: true
            });

        });
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".select2-client").select2();
        });
    </script>

@endsection