@extends('adminlte::page')

@section('title', 'IPRS | Multistep Registration')

@section('plugins.Select2', true)

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

@section('content')
    <div class="col-9 mx-auto">
        <x-adminlte-card >
            <div id="stepper1" class="bs-stepper">
                <div class="bs-stepper-header">
                    <div class="step" data-target="#test-l-1">
                        <button type="button" class="btn step-trigger">
                            <span class="bs-stepper-circle">1</span>
                            <span class="bs-stepper-label">Client</span>
                        </button>
                    </div>
                    <div class="line"></div>
                    <div class="step" data-target="#test-l-2">
                        <button type="button" class="btn step-trigger">
                            <span class="bs-stepper-circle">2</span>
                            <span class="bs-stepper-label">Contract</span>
                        </button>
                    </div>
                    <div class="line"></div>
                    <div class="step" data-target="#test-l-3">
                        <button type="button" class="btn step-trigger">
                            <span class="bs-stepper-circle">3</span>
                            <span class="bs-stepper-label">User</span>
                        </button>
                    </div>
                    <div class="line"></div>
                    <div class="step" data-target="#test-l-4">
                        <button type="button" class="btn step-trigger">
                            <span class="bs-stepper-circle">4</span>
                            <span class="bs-stepper-label">Preview</span>
                        </button>
                    </div>
                </div>
                <div class="bs-stepper-content">
                    <div id="test-l-1" class="content">
                        <form action="{{ route('onboarding.store') }}" method="post">
                            @csrf
                            @include('multistep.partials.client',['client' => $onboard->client ?? null])
                            <input type="hidden" name="record" value="{{ $onboard->client->rid ?? '' }}">
                            <input type="hidden" name="step" value="client">
                            <input type="hidden" name="obid" value="{{ session('onboarding-id') }}">
                            <div class="d-flex align-content-between justify-content-between mt-4">
                                <button type="submit" name="save" class="btn btn-primary">Save</button>
                                <button type="submit" name="submit" class="btn btn-success">Next</button>
                            </div>
                        </form>
                    </div>
                    <div id="test-l-2" class="content">
                        <form action="{{ route('onboarding.store') }}" method="post">
                            @csrf
                            @include('multistep.partials.contract', ['contract' => $onboard->contract ?? null, 'client' => $onboard->client ?? null])
                            <input type="hidden" name="record" value="{{ $onboard->contract->rid ?? '' }}">
                            <input type="hidden" name="step" value="contract">
                            <input type="hidden" name="obid" value="{{ session('onboarding-id') }}">
                            <div class="d-flex align-content-between justify-content-between mt-4">
                                <div>
                                    <button type="button" class="btn btn-dark" onclick="stepper1.previous()">Previous</button>
                                    <button type="submit" name="save" class="btn btn-primary ml-3">Save</button>
                                </div>
                                <button type="submit" name="submit" class="btn btn-success">Next</button>
                            </div>
                        </form>
                    </div>
                    <div id="test-l-3" class="content">
                        <form action="{{ route('onboarding.store') }}" method="post">
                            @csrf
                            @include('multistep.partials.user', ['user' => $onboard->user ?? null, 'contract' => $onboard->contract ?? null])
                            <input type="hidden" name="record" value="{{ $onboard->user->id ?? '' }}">
                            <input type="hidden" name="step" value="user">
                            <input type="hidden" name="obid" value="{{ session('onboarding-id') }}">
                            <div class="d-flex align-content-between justify-content-between mt-4">
                                <div>
                                    <button type="button" class="btn btn-dark" onclick="stepper1.previous()">Previous</button>
                                    <button type="submit" name="save" class="btn btn-primary ml-3">Save</button>
                                </div>
                                <button type="submit" name="submit" class="btn btn-success">Next</button>
                            </div>
                        </form>
                    </div>
                    <div id="test-l-4" class="content">
                        <form action="{{ route('onboarding.store') }}" method="post">
                            @csrf
                            @include('multistep.partials.preview', ['contract' => $onboard->contract ?? null, 'client' => $onboard->client ?? null, 'user' => $onboard->user ?? null])
                            <input type="hidden" name="record" value="{{ $onboard->user->id ?? '' }}">
                            <input type="hidden" name="step" value="review">
                            <input type="hidden" name="obid" value="{{ session('onboarding-id') }}">
                            <div class="d-flex align-content-between justify-content-between mt-4">
                                <div>
                                    <button type="button" class="btn btn-dark" onclick="stepper1.previous()">Previous
                                    </button>
                                </div>
                                <button type="submit" name="submit" class="btn btn-success">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </x-adminlte-card>
    </div>
@endsection

@section('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.min.css"/>
    <style>
        h3 {
            margin-top: 1.5rem !important;
        }

    </style>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/bs-stepper/dist/js/bs-stepper.min.js"></script>

    <script>
        let stepper1 = new Stepper(document.querySelector('#stepper1'), {
            //linear: false,
            animation: true
        });

        /// Will navigate to the second step
        stepper1.to({{ $onboard->step ?? 1 }})
    </script>

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

@endsection

@section('plugins.Select2', true)
