@extends('Admin.layout')
@section('content')
    <div class="d-flex justify-content-between align-items-center mb-1">
        <!-- Left side -->
        <div class="d-flex align-items-center">
            <h5 class="mb-0">
                <button type="button" class="btn btn-icon bg-white waves-effect me-2"
                    style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('staff_table') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Create Employee
            </h5>
        </div>
    </div>
    <div class="card p-4">
        <h5>Create Employee</h5>
        <form action="{{ route('add_staff') }}" method="post" id="login_form">
            @csrf
            <div class="row">
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Employee Name</label>
                    <input type="text" class="form-control" name="name" placeholder="Enter Employee Name"
                        value="{{ old('name') }}">
                </div>
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Employee ID</label>
                    {{-- <input type="text" class="form-control" name="user_id" placeholder="Enter Employee ID"
                        value="{{ old('user_id') }}"> --}}
                    <input type="text" class="form-control" name="user_id" value="{{ old('user_id', $nextUserId) }}"
                        placeholder="Enter Employee ID">
                </div>
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Mobile</label>
                    <input type="text" class="form-control" name="mobile" placeholder="Enter Mobile Number"
                        value="{{ old('mobile') }}">
                </div>
                <div class="col-lg-6 mb-2">
                    <label class="form-label"> Office Email</label>
                    <input type="text" class="form-control" name="email" placeholder="Enter Email"
                        value="{{ old('email') }}">
                </div>
                <div class="col-lg-6 mb-2">
                    <label class="form-label"> Personal Email</label>
                    <input type="text" class="form-control" name="personal_email" placeholder="Enter Email"
                        value="{{ old('personal_email') }}">
                </div>
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Password</label>
                    <input type="password" class="form-control" name="password" placeholder="Enter Password">
                </div>
                <div class="col-lg-6 mb-2">
                    <label for="designation" class="form-label">Designation</label>
                    <select name="designation" id="designation" class="form-select" required>
                        <option value="">Select Designation</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->role }}">{{ $role->role }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Address</label>
                    <input type="text" class="form-control" name="address" placeholder="Enter Address"
                        value="{{ old('address') }}">
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">DOB</label>
                    <input type="date" class="form-control" name="dob" value="{{ old('dob') }}">
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">DOJ</label>
                    <input type="date" class="form-control" name="doj" value="{{ old('doj') }}">
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Type</label>
                    <select name="type" id="type" class="form-select">
                        <option value="">Select Type</option>
                        <option value="staff" {{ old('type') == 'staff' ? 'selected' : '' }}>
                            Staff
                        </option>
                        <option value="freelancer" {{ old('type') == 'freelancer' ? 'selected' : '' }}>
                            freelancer
                        </option>
                        <option value="student" {{ old('type') == 'student' ? 'selected' : '' }}>
                            Student
                        </option>
                        <option value="intern" {{ old('type') == 'intern' ? 'selected' : '' }}>
                            Intern
                        </option>
                        <option value="trainee" {{ old('type') == 'trainee' ? 'selected' : '' }}>
                            Trainee
                        </option>
                    </select>
                </div>
                <div class="col-lg-4 mb-2 payment-status-section" style="display:none;">

                    <label class="form-label">Payment Status</label>

                    <select name="payment_status" class="form-select">

                        <option value="unpaid">Unpaid</option>

                        <option value="paid">Paid</option>

                    </select>

                </div>

                <div class="col-lg-4 mb-2 amount-section" style="display:none;">

                    <label class="form-label">Amount</label>

                    <input type="number" name="amount" class="form-control" placeholder="Enter Amount" min="0">

                </div>
            </div>
            <hr>

            <div class="row">

                {{-- Father Name --}}
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Father Name</label>

                    <input type="text" class="form-control" name="father" placeholder="Enter Father Name"
                        value="{{ old('father') }}">

                    @error('father')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Father Mobile --}}
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Father Mobile</label>

                    <input type="text" class="form-control" name="father_mobile" placeholder="Enter Father Mobile Number"
                        value="{{ old('father_mobile') }}" maxlength="10">

                    @error('father_mobile')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Mother Name --}}
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Mother Name</label>

                    <input type="text" class="form-control" name="mother" placeholder="Enter Mother Name"
                        value="{{ old('mother') }}">

                    @error('mother')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Mother Mobile --}}
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Mother Mobile</label>

                    <input type="text" class="form-control" name="mother_mobile" placeholder="Enter Mother Mobile Number"
                        value="{{ old('mother_mobile') }}" maxlength="10">

                    @error('mother_mobile')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

            </div>
        </form>
        <div class="d-flex form-actions justify-content-center mt-3">
            <button type="button" class="btn btn-primary me-3" id="finalSubmit">Submit</button>
            <button type="reset" class="btn btn-outline-secondary">Cancel</button>
        </div>
    </div>
    </div>
    <script>
        document.getElementById('finalSubmit').addEventListener('click', function (e) {
            e.preventDefault();
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('login_form').submit();
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const typeField = document.getElementById('type');
            const paymentSection = document.querySelector('.payment-status-section');
            const amountSection = document.querySelector('.amount-section');

            function toggleFields() {

                let selectedType = typeField.value;

                if (selectedType === 'intern' || selectedType === 'student') {

                    paymentSection.style.display = 'block';
                    amountSection.style.display = 'block';

                } else {

                    paymentSection.style.display = 'none';
                    amountSection.style.display = 'none';

                    document.querySelector('select[name="payment_status"]').value = 'unpaid';
                    document.querySelector('input[name="amount"]').value = '';
                }
            }

            toggleFields();

            typeField.addEventListener('change', toggleFields);
        });
    </script>

@endsection