@php use App\Models\Contract; @endphp
@extends('adminlte::page')

@section('title', 'IPRS | Register a User')

@section('plugins.Select2', true)

@section('content_header')
    <div class="col-9 mx-auto">
        <div class="row mb-2">
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-left">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('user.index') }}">Users</a></li>
                    <li class="breadcrumb-item active">Register User</li>
                </ol>
            </div>
        </div>
        <div class="row mb-2">
            <div class="col-sm-12">
                <h1 class="m-0">Register User</h1>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="col-9 mx-auto">
        <form method="POST" action="{{ route('user.store') }}@yield('id')">
            @csrf
            @section('method')@show

            <fieldset>
                <legend>User Details</legend>
                <div class="row">
                    <x-adminlte-select name="contract_id" label="Select a Contract" placeholder="Select a contract"
                                        fgroup-class="col-md-6" id="contract-select">
                        <option value="">Select a Contract</option>
                            @foreach(Contract::with('client')->get() as $contract)
                                <option @selected(isset($user) && $user->contract_rid == $contract->rid) value="{{ $contract->rid }}">
                                    {{ $contract->client->name_fl ?? '-' }}
                                </option>
                            @endforeach
                    </x-adminlte-select>

                    <x-adminlte-input name="name" label="Name" placeholder="Full Name"
                                        value="{{ $user->name ?? old('name') }}"
                                        fgroup-class="col-md-6"/>

                    <x-adminlte-input name="email" label="Email" placeholder="E-mail Address"
                                        value="{{ $user->email ?? old('email') }}"
                                        fgroup-class="col-md-6"/>

                    {{--<x-adminlte-input type="password" name="password" label="Password" placeholder="Password"
                                        fgroup-class="col-md-6"/>--}}

                    <x-adminlte-select id="status" name="status" label="Select a status"
                                        placeholder="Select a status" fgroup-class="col-md-6">
                        <option value="">Select a Status</option>
                        <option @selected(isset($user) && $user->status_l == "1") value="1">Active (1)</option>
                        <option @selected(isset($user) && $user->status_l == "0") value="0">Inactive (0)</option>
                    </x-adminlte-select>

                    <div class="form-check">
                        <label>Role(s)</label>
                        @foreach($roles as $role)
                            <div class="">
                                <input class="form-check-input" type="checkbox" value="{{ $role->name }}" id="flexCheckChecked{{ $role->id }}" name="role[]">
                                <label class="form-check-label" for="flexCheckChecked{{ $role->id }}">
                                    {{ $role->name }}
                                </label>
                            </div>
                        @endforeach
                    </div>

                </div>
            </fieldset>
            <button type="submit" class="btn btn-success">Submit</button>
        </form>
    </div>
@stop

@section('css')
    <!-- <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/styles.css') }}"> -->
    <style>
        fieldset {
            background-color: white;
            padding-block-start: 0.35em;
            padding-inline-start: 1.25em;
            padding-inline-end: 1.25em;
            padding-block-end: 0.625em;
            margin: 0 0 1em 0;
            border: 1px groove rgb(192, 192, 192);
            border-radius: 5px;
        }

        legend {
            background-color: #356eac;
            color: white;
            width: auto;
            font-size: medium;
            padding: 5px 10px;
            border-radius: 5px;
        }

        button{
            background-color: #14b04c;
        }

        .btn-primary{
            background-color: #356eac;
        }

        .form-check{
            padding-left: 2.25rem;
        }

        .select2-container .select2-selection--single{
            height: unset;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow{
            height: 38px;
        }

        h3{
            margin-top: 1.5rem !important;
        }

    </style>

@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        $('#contract-select').select2({
            placeholder: 'Select a contract',
            allowClear: true
        });
    });
</script>
@stop

