@extends('layouts.admin')
@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb iq-bg-primary">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i
                        class="ri-home-4-line mr-1 float-left"></i>Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page"> Employee</li>
        </ol>
    </nav>
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="iq-card">

                <div class="iq-card-header d-flex justify-content-between">
                    <div class="iq-header-title">
                        <h4 class="card-title">Add Employee</h4>
                    </div>
                    <a class="btn btn-primary" href="{{ route('user.index') }}" role="button">Back</a>
                </div>

                <div class="iq-card-body">
                    <div class="acc-edit">
                        <form class="box bg-white" method="Post" action="{{ route('user.store') }}" id="userForm"
                            enctype="multipart/form-data">
                            @csrf
                            {{-- <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0">Employee Type:</label>
                                <div class="col-sm-9">
                                    <label><input type="radio"  value="1" name="type"> Sales Executive</label>&nbsp;&nbsp;
                                    <label><input type="radio"  value="2" name="type"> Branch Manager</label>&nbsp;&nbsp;
                                    <label><input type="radio"  value="3" name="type"> Telecaller</label>&nbsp;&nbsp;
                                    <label><input type="radio"  value="4" name="type"> Credit Manager</label>
                                </div>
                            </div> --}}
                            <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0"> Department<span class="error">*</span>:</label>
                                <div class="col-sm-9">
                                    <select class="form-control" id="departmentid" name="departmentid" onchange="getDesignation()" required>
                                        <option value="">Select Department </option>
                                                                            </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0">Designation<span class="error">*</span>:</label>
                                <div class="col-sm-9">
                                    <select class="form-control" name="designationid" id="designationid" required>
                                        <option value="">Select Designation</option>

                                    </select>
                                </div>
                            </div>


                            <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0">Employee No:</label>
                                <div class="col-sm-9">
                                    <input type="text" placeholder="Enter Employee No" id="employee_no" value=""
                                        name="employee_no" required class="form-control">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0">Name:</label>
                                <div class="col-sm-9">
                                    <input type="text" placeholder="Enter Name" id="name" value=""
                                        name="name" required class="form-control">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0">User Name:</label>
                                <div class="col-sm-9">
                                    <input type="text" placeholder="Enter User Name" id="username" value=""
                                        name="username" required class="form-control">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0">Pay Out:</label>
                                <div class="col-sm-9">
                                    <input type="text" placeholder="Pay Out" id="payout" value=""
                                        name="payout" required class="form-control">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0">Email:</label>
                                <div class="col-sm-9">
                                    <input type="email" class="form-control" placeholder="Enter Email" name="email">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0">Vertical:</label>
                                <div class="col-sm-9">
                                    <select class="form-control" name="vertical">
                                        <option value="">Select Vertical</option>
                                        <option value="DSA">DSA</option>
                                        <option value="NBFC">NBFC</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0">Date of Joining:</label>
                                <div class="col-sm-9">
                                    <input type="date" placeholder="Enter Date of Joining" id="doj" value=""
                                        name="doj" required class="form-control">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0">Cluster:</label>
                                <div class="col-sm-9">
                                    <select class="form-control" id="cluster" name="cluster" onchange="getBranch()">
                                        <option value="">Select Cluster</option>
                                                                            </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0">Branch:</label>
                                <div class="col-sm-9">
                                    <select class="form-control" name="branch" id="branch">
                                        <option value="">Select Branch</option>
                                                                            </select>
                                </div>
                            </div>


                            <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0">Password</label>
                                <div class="col-sm-9">
                                    <input type="password" class="form-control" placeholder="Enter Password"
                                        name="password">
                                </div>
                                @if ($errors->has('password'))
                                    <span class="error"
                                        style="color:red;font-size:15px">{{ $errors->first('password') }}</span>
                                @endif
                            </div>
                            <div class="form-group row">
                                <label class="control-label col-sm-3 align-self-center mb-0">Confirm Password</label>
                                    <div class="col-sm-9">
                                        <input type="password" class="form-control" placeholder="Enter Confirm Password"
                                            name="password_confirmation">
                                    </div>
                                    @if ($errors->has('password_confirmation'))
                                        <span class="error"
                                            style="color:red;font-size:15px">{{ $errors->first('password_confirmation') }}</span>
                                    @endif
                                </div>
                                <div class="form-group row">
                                    <label class="control-label col-sm-3 align-self-center mb-0">Status:</label>
                                    <div class="col-sm-9">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" id="customSwitch2"
                                                name="status" checked="">
                                            <label class="custom-control-label" for="customSwitch2">Toggle this switch
                                                element</label>
                                        </div>
                                    </div>
                                </div>
                            <div class="col-md-12 mb-3 text-center">
                                <a href="{{ route('user.index') }}" class="btn btn-success">Cancel</a>
                                <button type="submit" class="btn btn-primary">Publish</button>
                            </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script>
        function getBranch() {
        var cluster = $("#cluster").val();
        $.ajax({
            type: "post",
            url: '/getbranchofcluster',
            data: {"_token":'