@extends('app')
@section('content')
<div class="content-page">
    <div class="content">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Hyper</a></li>
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
                            <li class="breadcrumb-item active">Form Wizard</li>
                        </ol>
                    </div>
                    <h4 class="page-title">Stuff</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    @if(Session::has('response'))
                                    {!!Session::get('response')['message']!!}
                    @endif
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li class="invalid-tooltips">{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    <div class="card-body">
                        @if(!empty($employee))
                            <form action="{{route('stuffs.update',$employee)}}" method="POST" enctype="multipart/form-data">
                                @csrf
                                @method('put')
                        @else
                            <form action="{{route('stuffs.store')}}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('post')
                        @endif
                        <h5 class="mb-3 text-uppercase bg-light p-2 mt-4"><i class="mdi mdi-office-building me-1"></i> {{__('Add New Employee')}} :</h5>

                           <div class="row">

                            <div class="col-md-6 col-xl-4 mb-3">
                                <label for="name" class="form-label">{{__('Name')}}</label>
                                <input type="text" value="{{old('name',!empty($employee->name)? $employee->name : null)}}" id="name" class="form-control" placeholder="Enter Full name" name="name"  required>
                            </div>
                            <div class="col-md-6 col-xl-4 mb-3">
                                <label for="fname" class="form-label">{{__('Father Name')}}</label>
                                <input type="text" id="fname" value="{{old('fname',!empty($employee->father_name)? $employee->father_name : null)}}" class="form-control" placeholder="Enter Father name" name="fname"  required>
                            </div>
                            <div class="col-md-6 col-xl-4 mb-3">
                                <label for="mname" class="form-label">{{__('Mother Name')}}</label>
                                <input type="text" id="mname" value="{{old('mname',!empty($employee->mother_name)? $employee->mother_name : null)}}" class="form-control" placeholder="Enter Mother name" name="mname" required>
                            </div>


                            <div class="col-md-6 col-xl-4 mb-3">
                                <label for="email" class="form-label">{{__('Email')}}:</label>
                                <input type="email" id="email" class="form-control" placeholder="Enter project name" name="email" value="{{ old('email',!empty($employee->email)? $employee->email : null)}}" required>
                            </div>

                            <div class="col-md-6 col-xl-4 mb-3">
                                <label for="phone" class="dob">{{__('Phone')}}:</label>
                                <input type="tel" class="form-control"
                                name="phone" id="phone"
                                value="{{ old('phone',!empty($employee->phone)? $employee->phone : null)}}"
                                >
                            </div>

                            <div class="col-xl-4 mb-3 col-md-6">
                                <label for="gender" class="mb-0">{{__('Gender')}} : </label>
                                <Select class="form-control" name="gender" id="gender" required>
                                    <option value="">Select Gender</option>
                                    <option {{old('male',!empty($employee->gender)? $employee->gender : null) == 'male'?? 'selected'}} value="male">Male</option>
                                    <option {{old('female',!empty($employee->gender)? $employee->gender : null) == 'female'?? 'selected'}}  value="female">Female</option>
                                    <option {{old('other',!empty($employee->gender)? $employee->gender : null) == 'other' ?? 'selected'}} value="other">Other</option>
                                </Select>
                            </div>

                            <div class="col-xl-4 mb-3 col-md-6">
                                <label for="nid" class="form-label">{{__('NID/Birth Certificate')}}</label>
                                <input type="number" id="nid" class="form-control" placeholder="Enter project name" name="nid_or_birthid" value="{{ old('nid_or_birthid',!empty($employee->nid_or_birthid)? $employee->nid_or_birthid : null)}}" >
                            </div>

                            <div class="col-xl-4 mb-3 col-md-6" id="Date Of Birth">
                                <label class="dob">{{__('Date of Birth')}}</label>
                                <input type="date" class="form-control"
                                name="date_of_birth" required
                                value="{{ old('date_of_birth',!empty($employee->date_of_birth)? $employee->date_of_birth : null)}}"
                                >
                            </div>
                            <div class="col-xl-4 mb-3 col-md-6">
                                <label for="attachment" class="mb-0">{{__('Picture')}} : </label>

                                    <input class="form-control" type="file" id="image" name="image"
                                    value="{{old('image')}}">
                                    <p class="text-muted font-14">Recommended Picture size less then 300(kb).
                                        <a href="https://imageresizer.com/" target="__blank">Resize Now</a>
                                    </p>
                            </div>

                            <div class="col-md-6 col-xl-4 mb-3">
                                <label for="home_contact" class="form-label">{{__('Home Phone')}}:</label>
                                <input type="tel" id="home_contact" class="form-control" placeholder="Enter Home Phone number" name="home_contact" value="{{ old('home_contact',!empty($employee->home_contact)? $employee->home_contact : null)}}">
                            </div>

                            <div class="col-md-6 col-xl-4 mb-3">
                                <label for="refarence_name" class="dob">{{__('Refarence Name')}}</label>
                                <input type="text" class="form-control"
                                name="refarence_name"
                                value="{{ old('refarence_name',!empty($employee->refarence_name)? $employee->refarence_name : null)}}"
                                >
                            </div>

                            <div class="col-md-6 col-xl-4 mb-3 ">
                                <label for="resum" class="mb-0">{{__('Resum/CV')}} : </label>

                                    <input class="form-control" type="file" id="resum" name="resum"
                                    value="{{old('resum',!empty($employee->resum)? $employee->resum : null)}}">
                                    <p class="text-muted font-14">Recommended pdf file size less then 1024kb (px).
                                        <a href="https://www.freepdfconvert.com/compress-pdf"target="__blank">Resize Now</a>
                                    </p>
                            </div>
                            <div class="col-md-6 col-xl-4 mb-3 ">
                                <label for="designation" class="mb-0">{{__('Designation')}} : </label>
                                <select class="form-select" name="designation" id="designation"  required>
                                    <option value="">{{__('Select Designation')}}:</option>
                                    @forelse ($designations as $item)
                                    <option {{old('designation',!empty($employee->designation_id)? $employee->designation_id : null) == $item->id ?? 'selected'}} value="{{$item->id}}" >{{$item->designation}}</option>

                                    @empty
                                    <option value="">{{__('No data founds!')}}:</option>

                                    @endforelse
                                </select>
                            </div>
                            <div class="col-xl-4 mb-3 col-md-6">
                                <label class="dob">{{__('Joinning Date')}}</label>
                                <input type="date" class="form-control"
                                name="Joinning_date" required
                                value="{{ old('Joinning_date',!empty($employee->Joinning_date)? $employee->Joinning_date : null)}}"
                                >
                            </div>
                            @if (!empty($employee->status))
                            <div class="col-xl-4 mb-3 col-md-6">
                                <label class="dob">{{__('Status')}}</label>
                                <select name="status" id="" class="form-select" required>
                                    <option value="">Select Status</option>
                                    <option value="1">Active</option>
                                    <option value="0">Deactive</option>
                                </select>
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="mb-3 text-uppercase bg-light p-2 mt-4"><i class="mdi mdi-office-building me-1"></i> {{__('Address')}} :</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="address" class="form-label">{{__('Address')}}</label>
                                    <textarea class="form-control" rows="6" id="address" name="address" placeholder="1234 Main St" required>
                                        {{!empty($employee->address)? $employee->address : null}}
                                    </textarea>
                                </div>
                            </div>
                            <div class="col-md-6">

                            @php
                                $divisions = DB::table('divisions')->get();

                            @endphp
                            <div class="mb-3">
                                <label for="division" class="form-label">{{__('Division')}}</label>
                                <select id="divisons" onchange="handleDivisionChange(this.value)" name="division" class="form-select" required>

                                    <option>{{_('Select Division')}}</option>

                                @forelse ($divisions as $division)
                                <option value="{{$division->id}}" >{{$division->divison}}</option>

                                @empty
                                <option>No data Found</option>

                                @endforelse
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="district" class="form-label">{{__('District')}}</label>
                                <select id="district"  name="district" class="form-select" required>
                                    <option>{{_('Select District')}}</option>
                                </select>
                            </div>
                            </div> <!-- end col -->
                        </div> <!-- end row -->
                    </div>
                    </div>
                    <!-- end row -->
                    <!-- Plot Documents -->
                    <div class="col-10 offset-1 d-flex justify-content-end">

                        <button type="reset" class="btn btn-warning mt-2 mx-1"><i class="mdi mdi-content-save"></i> Reset</button>
                        <button type="submit" class="btn btn-success mt-2"><i class="mdi mdi-content-save mx-1"></i> Save</button>
                    </div>
                        </form>

                    </div> <!-- end card-body -->
                </div> <!-- end card-->
            </div> <!-- end col-->
        </div>
        <!-- end row-->
    </div>
</div>

@endsection
@push('scripts')

<script>
    function handleDivisionChange(e){

        axios.get('/sanctum/csrf-cookie').then(response => {
            axios.get(`{{url('districts')}}/${e}`,{
                Headers:{
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content'),
                    'Content-Type':'application/json'
                }
            }).then(({data})=>{
                console.log(data);
                if(data.status == "success"){
                    let content = data.data.map((d)=>{
                        return `<option value='${d.id}'>${d.district}</option>`;                    })
                    $("#district").html('<option>Select District</option>'+content);
                }
            }).catch(({response})=>{
                console.log(response.data.message);
            })
        });

    }

</script>
@endpush