@extends('layouts.app')
@push('css')
<style type="">
    .profile-pic-wrapper {
        height: 250px;
        width: 250px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .pic-holder {
        text-align: center;
        position: relative;
        border-radius: 50%;
        width: 150px;
        height: 150px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .pic-holder .pic {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: center;
        object-position: center;
    }

    .pic-holder .upload-file-block,
    .pic-holder .upload-loader {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(90, 92, 105, 0.7);
        color: #f8f9fc;
        font-size: 12px;
        font-weight: 600;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .pic-holder .upload-file-block {
        cursor: pointer;
        opacity: 1;
    }

    .pic-holder:hover .upload-file-block {
        opacity: 1;
    }

    .pic-holder.uploadInProgress .upload-file-block {
        display: none;
    }

    .pic-holder.uploadInProgress .upload-loader {
        opacity: 1;
    }

    /* Snackbar css */
    .snackbar {
        visibility: hidden;
        min-width: 250px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        font-size: 14px;
        transform: translateX(-50%);
    }

    .snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    @-webkit-keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }
        to {
            bottom: 30px;
            opacity: 1;
        }
    }

    @keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }
        to {
            bottom: 30px;
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }
        to {
            bottom: 0;
            opacity: 0;
        }
    }

    @keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }
        to {
            bottom: 0;
            opacity: 0;
        }
    }
</style>
@endpush
@section('content')

<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                @isset($trainer)
                <h1 class="m-0 text-dark">Trainer Edit</h1>
                @else
                <h1 class="m-0 text-dark">Trainer Create</h1>
                @endisset
            </div>
            <!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    @can('trainer.index')
                    <li> <a href="{{route('trainer.index')}}" class="btn btn-sm m-1 btn-success"><i class="fas fa-arrow-left"></i> Back</a></li>
                    @endcan
                    <li><a href="{{ route('home') }}" class="btn btn-sm m-1 btn-info"><i class="fas fa-home"></i> Home</a></li>
                </ol>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <!-- Main row -->
        <div class="row">
            <div class="col-md-12 col-x-12 col-sm-12">
                <form action="{{ isset($trainer) ? route('trainer.update',$trainer->id) : route('trainer.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf @isset($trainer) @method('PUT') @endisset
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="full_name">Trainer Name</label>
                                <input id="full_name" type="text" placeholder="trainer Name" class="form-control @error('full_name') is-invalid @enderror" name="full_name" value="{{ $trainer->full_name ?? old('full_name') }}" />
                                @error('full_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="email">Email</label>
                                <input id="email" type="text" placeholder="Email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ $trainer->email ?? old('email') }}" />
                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="batch">Batch</label>
                                <select class="js-example-basic-single form-control @error('batch_id') is-invalid @enderror" id="batch" name="batch_id">
                                    <option value="">Select batch</option>
                                    @foreach ($batchs as $batch)
                                    <option value="{{ $batch->id }}" @isset($trainer) {{ $batch->id==$trainer->batch_id ?'selected' : '' }} @endif>{{ $batch->name }}</option>
                                    @endforeach
                                </select>
                                @error('batch_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="gender">Gender</label>
                                <select class="form-control @error('gender') is-invalid @enderror" id="gender" name="gender">
                                    <option value="">Select Gender</option>
                                    <option value="1" @isset($trainer) {{ $trainer->gender==1 ?'selected' : '' }} @endif>Male</option>
                                    <option value="2" @isset($trainer) {{ $trainer->gender==2 ?'selected' : '' }} @endif>FeMale</option>
                                    <option value="3" @isset($trainer) {{ $trainer->gender==3 ?'selected' : '' }} @endif>Other</option>
                                </select>
                                @error('gender')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input id="password" type="password" placeholder="Password" class="form-control @error('password') is-invalid @enderror" name="password" />
                                @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ 'Your password must be more than 8 characters long, should contain at-least 1 Uppercase, 1 Lowercase, 1 Numeric and 1 special character.' }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="c_password">Confirm Password</label>
                                <input id="c_password" type="password" placeholder="Confirm Password" class="form-control @error('password') is-invalid @enderror" name="password_confirmation" />
                                @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name">Trainer User Name</label>
                                <input id="name" type="text" placeholder="trainer User Name" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ $trainer->name ?? old('name') }}" />
                                @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label for="roles">Role Status</label>
                                @isset($trainer)
                                <select class="form-control @error('role_id') is-invalid @enderror" id="roles" name="role_id">
                                    <option value="">Select User Role</option>
                                    @foreach ($roles as $role)
                                    <option value="{{ $role->id }}"  @isset($trainer) {{ $role->id==$trainers->userinfo->role_id ?'selected' : '' }} @endif>{{ $role->name }}</option>
                                    @endforeach
                                </select>
                                @else
                                <select name="role_id" id="" class="form-control @error('role_id') is-invalid @enderror">
                                    <option value="">Select Role</option>
                                    <option value="3">Trainer</option>
                                </select>
                                @endisset

                                @error('role_id')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <input placeholder="Index No" id="content" style="display:none;" type="number" class="form-control @error('index_no') is-invalid @enderror" name="index_no">
                            <div class="form-group">
                                <label  for="status">Status</label>
                                <select name="status" class="form-control @error('status') is-invalid @enderror" id="status">
                                    <option value="1"  @isset($trainer) {{ $trainers->userinfo->is_active==1 ?'selected' : '' }} @endif>Active</option>
                                    <option value="0" @isset($trainer) {{ $trainers->userinfo->is_active==0 ?'selected' : '' }} @endif>In Active</option>
                                </select>
                                @error('status')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>Birth Date</label>
                                <div class="date input-group" id="reservationdate" data-target-input="nearest">
                                    <input type="text" id="date" name="trainer_birth" class="form-control datetimepicker-input @error('trainer_birth') is-invalid @enderror" data-target="#reservationdate" value="{{$trainer->trainer_birth ?? old('trainer_birth')}}" />
                                    <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                    @error('trainer_birth')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>

                            </div>
                            <div class="form-group">
                                <div class="profile-pic-wrapper">
                                    <div class="pic-holder">
                                        <img id="profilePic" class="pic" src="@isset($trainer) {{asset('images/profile/'.$trainers->userinfo->image)}} @endisset" />
                                        <label for="newProfilePhoto" class="upload-file-block">
                                            <div class="text-center">
                                                <div class="mb-2">
                                                    <i class="fa fa-camera fa-2x"></i>
                                                </div>
                                                <div class="text-uppercase">
                                                    Update <br />
                                                    Profile Photo
                                                </div>
                                            </div>
                                        </label>
                                        <input onchange="readURL(this);" class="uploadProfileInput @error('image') is-invalid @enderror" type="file" name="image" id="newProfilePhoto"  style="display: none;" />
                                        @error('image')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    @isset($trainer)
                    <input type="submit" class="btn btn-primary" value="Update" />
                    @else
                    <input type="submit" class="btn btn-primary" value="Create" />
                    @endisset
                </form>
                <br><br>
            </div>
        </div>
        <!-- /.row (main row) -->
    </div>
    <!-- /.container-fluid -->
</section>
<!-- /.content -->

@endsection @push('js')
<script>
    $(document).ready(function () {
        $(".js-example-basic-single").select2();
    });
    $("#reservationdate").datetimepicker({
        format:'YYYY/MM/DD',
    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#profilePic')
                    .attr('src', e.target.result)
                    .width(250)
                    .height(250);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }

</script>
<script>
    $(document).ready(function () {
        $("#roles").change(function () {
            var selectedVal = $("#roles option:selected").val();
            if(selectedVal == "4"){
                $("#content").show();
            } else{
                $("#content").hide();
            }
        });
    });
</script>
@endpush