@extends('Admin.include.app')
@section('content')
    <style>
        .input-group .fas {
            color: black;
        }
    </style>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">

                    <div class="card card-primary card-outline">
                        <div class="card-body box-profile">
                            <div class="text-center">
                                <img class="profile-user-img img-fluid img-circle"
                                    src="{{ isset($data->profile_image) ? asset('/images/employee/' . $data->profile_image) : asset('dist/img/user2-160x160.jpg') }}"
                                    alt="{{ isset($data->employee_name) ? $data->employee_name : '' }}">
                            </div>
                            <h3 class="profile-username text-center">
                                {{ isset($data->employee_name) ? $data->employee_name : '' }}</h3>
                            <p class="text-muted text-center">
                                <b>Employee ID: </b>{{ isset($data->employee_id) ? $data->employee_id : '' }}
                            </p>
                            <ul class="list-group list-group-unbordered mb-3">
                                <li class="list-group-item">
                                    <b>Mobile:</b> <a
                                        class="float-right">{{ isset($data->whatsapp_number) ? $data->whatsapp_number : '' }}</a>
                                </li>
                                <li class="list-group-item">
                                    <b>Email:</b> <a class="float-right {{ isset($data->email) ? 'btn btn-info' : '' }}"
                                        href="mailto:{{ isset($data->email) ? $data->email : '' }}">{{ isset($data->email) ? $data->email : '' }}</a>
                                </li>

                            </ul>
                        </div>

                    </div>

                </div>
                <div class="col-md-8">
                    <div class="card card-primary card-outline">
                        <div class="card-body">
                            <div class="tab-pane active" id="settings">
                                @if (\Request::route()->getName() === $c_page . '.create')
                                    <form name="addForm" id="addForm" class="col-md-12" method="POST"
                                        action="{{ route($c_page . '.store') }}" enctype="multipart/form-data">
                                        @csrf
                                    @else
                                        <form name="addForm" id="addForm" class="col-md-12" method="POST"
                                            action="{{ route($c_page . '.update', $data->id) }}"
                                            enctype="multipart/form-data">
                                            @csrf
                                            @method('PATCH')
                                @endif
                                <div class="form-group row">
                                    @php
                                        $emp_id = 'EMP' . rand(1000, 9999) . time();
                                    @endphp
                                    <label for="employee_id"
                                        class="col-sm-3 col-form-label text-uppercase font-weight-bold">Employee
                                        Id:*</label>
                                    <div class="input-group col-sm-9">
                                        <input name="employee_id" type="text" id="employee_id"
                                            class="form-control @error('employee_id') is-invalid @enderror"
                                            value="{{ !empty($data->employee_id) ? $data->employee_id : $emp_id }}"
                                            required placeholder="employee_id" autocomplete="employee_id">
                                    </div>
                                    @error('employee_id')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="form-group row">
                                    <label for="employee_name"
                                        class="col-sm-3 col-form-label text-uppercase font-weight-bold">Employee
                                        Name:*</label>
                                    <div class="input-group col-sm-9">
                                        <input name="employee_name" type="text" id="employee_name"
                                            class="form-control @error('employee_name') is-invalid @enderror"
                                            value="{{ !empty($data->employee_name) ? $data->employee_name : old('employee_name') }}"
                                            required placeholder="Employee Name" autocomplete="employee_name" autofocus>
                                    </div>
                                    @error('employee_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="form-group row">
                                    <label for="email"
                                        class="col-sm-3 col-form-label text-uppercase font-weight-bold">Email:*</label>
                                    <div class="input-group col-sm-9">
                                        <input name="email" type="email" id="email"
                                            class="form-control @error('email') is-invalid @enderror"
                                            value="{{ !empty($data->email) ? $data->email : old('email') }}" required
                                            placeholder="email" autocomplete="email" autofocus>
                                    </div>
                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="form-group row">
                                    <label for="whatsapp_number"
                                        class="col-sm-3 col-form-label text-uppercase font-weight-bold">Whatsapp
                                        number:*</label>
                                    <div class="input-group col-sm-9">
                                        <input name="whatsapp_number" type="text" id="whatsapp_number"
                                            class="form-control @error('whatsapp_number') is-invalid @enderror"
                                            value="{{ !empty($data->whatsapp_number) ? $data->whatsapp_number : old('whatsapp_number') }}"
                                            required placeholder="WhatSapp Number" autocomplete="whatsapp_number" autofocus
                                            oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
                                    </div>
                                    @error('whatsapp_number')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="form-group row">
                                    <label for="mobile_number"
                                        class="col-sm-3 col-form-label text-uppercase font-weight-bold">Mobile
                                        number:</label>
                                    <div class="input-group col-sm-9">
                                        <input name="mobile_number" type="text" id="mobile_number"
                                            class="form-control @error('mobile_number') is-invalid @enderror"
                                            value="{{ !empty($data->mobile_number) ? $data->mobile_number : old('mobile_number') }}"
                                            placeholder="Mobile Number" autocomplete="mobile_number" autofocus
                                            oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">
                                    </div>
                                    @error('mobile_number')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="form-group row">
                                    <label for="profile_image"
                                        class="col-sm-3 col-form-label text-uppercase font-weight-bold">Profile:
                                    </label>
                                    <div class="input-group col-sm-9">
                                        <input name="profile_image" type="file" id="profile_image"
                                            class="form-control @error('profile_image') is-invalid @enderror"
                                            value="{{ old('profile_image') }}">
                                    </div>
                                    @error('profile_image')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="form-group row">
                                    @if (empty($data))
                                        <div class="col-sm-6">

                                            <b>Employee Temporary Password is : 12345678</h3>
                                        </div>
                                    @endif

                                    <div class="offset-sm-6">
                                        <button type="submit" class="btn btn-success">Submit</button>
                                    </div>
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>



            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection
@section('script')
    <script>
        $(function() {
            $(document).ready(function() {
                //alert();
                $.validator.methods.isJSON = function(value, element) {
                    if (typeof(value) !== 'string') {
                        return false;
                    }
                    try {
                        JSON.parse(value);
                        return true;
                    } catch (e) {
                        return false;
                    }
                }
                $("#addForm").validate({
                    rules: {
                        profile_image: {
                            required: false,
                            accept: "image/jpg,image/jpeg,image/png",
                        },
                        employee_id: {
                            required: true,
                        },
                        employee_name: {
                            required: true,
                        },
                        email: {
                            required: true,
                            email: true,
                        },
                        mobile_number: {
                            required: false,
                            minlength: 10,
                        },
                        whatsapp_number: {
                            required: true,
                            minlength: 10,
                        },

                    },
                    messages: {
                        employee_name: {
                            required: "Please enter a employee name"
                        },
                    },
                    errorElement: "em",
                    errorPlacement: function(error, element) {
                        // Add the `help-block` class to the error element
                        error.addClass("help-block");

                        if (element.prop("type") === "checkbox") {
                            error.insertAfter(element.parent("label"));
                        } else {
                            error.insertAfter(element);
                        }
                    },
                    highlight: function(element, errorClass, validClass) {
                        $(element).parents(".col-sm-5").addClass("has-error").removeClass(
                            "has-success");
                    },
                    unhighlight: function(element, errorClass, validClass) {
                        $(element).parents(".col-sm-5").addClass("has-success").removeClass(
                            "has-error");
                    }
                });
            });
        });
    </script>
@endsection
