@extends('backend.layouts.app')
@section('title', @$data['title'])

@section('style')
    <style>
        .nav-pills .nav-link {
            height: 40x !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 1rem !important;
            font-weight: 500 !important;
        }

        .button {
            height: 40px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 1rem !important;
            font-weight: 500 !important;
            padding-inline: 25px !important;
            min-width: 150px;
        }
    </style>
@endsection

@section('content')
    {!! breadcrumb([
        'title' => @$data['title'],
        route('admin.dashboard') => _trans('common.Dashboard'),
        '#' => @$data['title'],
    ]) !!}

    <form method="POST" action="{{ route('user.store') }}" class="card ot-card" enctype="multipart/form-data" autocomplete="off">
        @csrf

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class=" mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="card-header bg-light">
            <nav class="nav nav-pills nav-fill">
                <a class="nav-link tab-pills bg-gradient" href="#">{{ _trans('common.Personal Info') }}</a>
                <a class="nav-link tab-pills bg-gradient" href="#">{{ _trans('common.Official Setup') }}</a>
                <a class="nav-link tab-pills bg-gradient" href="#">{{ _trans('common.Weekend & Holiday') }}</a>
            </nav>
        </div>
        <div class="card-body">
            @include('backend.user.employee.form.personal-step')
            @include('backend.user.employee.form.official-step')
            @include('backend.user.employee.form.weekend-holiday-step')
        </div>
        <div class="card-footer text-end">
            <div class="d-flex bg-light p-2">
                <button type="button" id="back_button" class="button btn btn-secondary bg-gradient border-0" onclick="back()">{{ _trans('common.Previous') }}</button>
                <button type="button" id="next_button" class="button btn btn-primary bg-gradient border-0 ms-auto">{{ _trans('common.Next') }}</button>
            </div>
        </div>
    </form>
    <input type="hidden" id="get_attendance_method_data" value="{{ route('user.getAttendanceMethod') }}">
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('#SelectionDiv').hide();

            $('input[name="password_type"]').on('change', function() {
                if ($(this).val() === 'custom') {
                    $('#SelectionDiv').show();
                } else {
                    $('#SelectionDiv').hide();
                }
            });
        });

        var current = 0;
        var tabs = $(".tab");
        var tabs_pill = $(".tab-pills");

        loadFormData(current);

        function loadFormData(n) {
            tabs_pill.removeClass("active");
            tabs.addClass("d-none");

            $(tabs_pill[n]).addClass("active");
            $(tabs[n]).removeClass("d-none");

            $("#back_button").attr("disabled", n == 0);
            if (n == tabs.length - 1) {
                $("#next_button")
                    .text("Submit")
                    .removeAttr("onclick")
                    .attr("onclick", "submit()");
            } else {
                $("#next_button")
                    .text("Next")
                    .attr("type", "button")
                    .attr("onclick", "next()");
            }
        }

        function next() {
            if (current < tabs.length - 1) {
                current++;
                loadFormData(current);
            }
        }

        function back() {
            if (current > 0) {
                current--;
                loadFormData(current);
            }
        }

        function submit() {}

        $(".tab-pills").on("click", function () {
            var index = $(this).index();
            current = index;
            loadFormData(current);
        });
    </script>
@endsection