@include('layouts.header')

<style>
    .form-container {
        display: flex;
        gap: 20px; /* Space between columns */
    }
    .form-column {
        flex: 1; /* Each column takes equal width */
    }
    .form-control:focus {
        border-color: #3498db;
        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
    }
    .text-danger {
        color: #e74c3c;
    }
 </style>

<div class="container-fluid mt-4">
    <a href="{{ url('search') }}" target="_self" class="cancel"> Back    </a>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

<div class="card p-4">
    <form action="{{ url('store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
         <div class="form-container">
            <!-- Left Column - Personal Information -->
                <div class="form-column">
                    <div class="form-section">
                        <div class="section-title">Personal Information</div>

                        <div class="form-group">
                            <label>Employee Code <span class="text-danger">*</span></label>
                            <input name="EmployeeCode" type="text" class="form-control" placeholder="Employee Code*" required>
                        </div>
                        
                        <div class="form-group">
                            <label>Employee Name <span class="text-danger">*</span></label>
                            <input name="EmployeeName" type="text" class="form-control" placeholder="Employee Name*" required>
                        </div>

                       <div class="form-group">
                            <label>Gender <span class="text-danger">*</span></label>
                            <select name="Gender" class="form-control" required>
                                <option value="">Select</option>
                                <option>Male</option>
                                <option>Female</option>
                            </select>
                        </div>
                        
                    <div class="form-group">
                        <label>Date of Birth <span class="text-danger">*</span></label>
                        <input type="date" name="DateOfBirth" class="form-control" required>
                    </div>
                
                    <div class="form-group">
                        <label>Date of Joining <span class="text-danger">*</span></label>
                        <input type="date" name="DateOfJoining" class="form-control" value="{{ date('Y-m-d') }}">
                    </div>
                
                    <div class="form-group">
                        <label>Email <span class="text-danger">*</span></label>
                        <input type="email" name="Email" class="form-control" placeholder="Email" required>
                    </div>
                
                        <div class="form-group">
                                <label>Mobile Number <span class="text-danger">*</span></label>
                                <input type="text" name="MobileNumber" class="form-control" placeholder="Mobile Number" required>
                        </div>
                    </div>
                </div>
                <!-- Right Column - Job Details -->
                <div class="form-column">
                    <div class="form-section">
                        <div class="section-title">Job Details</div>

                        <div class="form-group">
                            <label>Department <span class="text-danger">*</span></label>
                            <select name='dept_id' id='dept_id' class='form-control'>
                                <option value="">Select</option>
                                @foreach($department as $dept)
                                    <option value="{{ $dept['dept_id'] }}">{{ $dept['dept_name'] }}</option>
                                @endforeach 
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Designation <span class="text-danger">*</span></label>
                            <select name='Designation' id='desg' class='form-control'>
                                <option value="">Select</option>
                                @foreach($designation as $desg)
                                    <option value="{{ $desg['name'] }}">{{ $desg['name'] }}</option>
                                @endforeach 
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Manager Name</label>
                            <input type="text" name="ManagerName" id="ManagerName" class="form-control" placeholder="Manager Name">
                        </div>

                        <div class="form-group">
                            <label>Location</label>
                            <select name="loc_id" id="loc_id" class="form-control">
                                <option value="">Select</option>
                                @foreach($location as $loc)
                                    <option value="{{ $loc['loc_id'] }}">{{ $loc['lname'] }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Status</label>
                            <select name="status" id="status" class="form-control">
                                <option value="">All</option>
                                <option value="1">Active</option>
                                <option value="0">Paused</option>
                            </select>
                        </div>
                    </div>
                </div>
        </div>
                <div class="text-center mt-4">
                    <button type="submit" class="btn btn-info px-4 py-2">Save</button>
                </div>
        </form>
    </div>
</div>

  @include('layouts.footer')