@extends('admin.layouts.master')
@section('listColor','light')
@section('pendColor','light')
@section('dashColor','light')
@section('content')
    <style>
        .main_container {
            margin-top: 35px !important;
            padding: 40px 10px;
            background-color: #fff;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            border-radius: 8px;
        }

        .input_fields {
            display: block;
            width: 100%;
            height: calc(1.5em + 0.75rem + 2px);
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
        }

        .input_fields:focus {
            background-color: #fefeff;
            border-color: #95a0f4;
            outline: none;
        }

        @media (max-width: 567px) {
            .update_btn {
                width: 100% !important;
            }
        }

        .update_btn {
            border: 1px solid black !important;
            color: black !important;
            background-color: #fff !important;
        }

        .update_btn:hover {
            border: 1px solid #fff !important;
            color: #fff !important;
            background-color: black !important;
        }
        .mb-10{
            margin-bottom: 60px;
        }
    </style>






    <div class="main-content mb-10">
        <section class="section">

            <div class="main_container">
                <div class="container">

                    <h2 class="mb-3">
                        Profile Update
                    </h2>
                    @if (Session::has('message'))
                        <div id="btnclose"
                            class="alert alert-{{ Session::get('messageType') }} alert-dismissible fade show succes_show"
                            role="alert">
                            <strong>{{ Session::get('message') }} </strong>
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                    class="close_btn" aria-hidden="true">&times;</span></button>
                        </div>
                    @endif
                    <form action="{{ route('admin.profile.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div>
                                    <label class="mt-2">First Name</label> <br>
                                    <input type="hidden" name="id" value="{{ $admin->id }}">
                                    <input class="input_fields" type="text" placeholder="First name" name="fname"
                                        @if (old('fname')) value="{{ old('fname') }}"
                                            @else value="{{ $admin->first_name ?? '' }}" @endif />
                                    @error('fname')
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div>
                                    <label class="mt-2">Last Name</label> <br>
                                    <input class="input_fields" type="text" placeholder="Last name" name="lname"
                                        @if (old('lname')) value="{{ old('lname') }}"
                                    @else value="{{ $admin->last_name ?? '' }}" @endif />
                                    @error('lname')
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <label class="mt-2">Email</label> <br>
                                <input class="input_fields" type="email" placeholder="Name" name="email"
                                    @if (old('email')) value="{{ old('email') }}"
                                @else value="{{ $admin->email ?? '' }}" @endif />
                                @error('email')
                                    <span class="text-danger">
                                        {{ $message }}
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <div>
                                    <label class="mt-2">Phone Number</label> <br>
                                    <input class="input_fields" type="number" placeholder="Name" name="phone"
                                        @if (old('phone')) value="{{ old('phone') }}"
                                    @else value="{{ $admin->phone ?? '' }}" @endif />
                                    @error('phone')
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <label class="mt-2">Upload Image</label> <br>
                                <div>
                                    <input type="file" name="image" class="imageField">
                                    @error('fname')
                                        <span class="text-danger">
                                            {{ $message }}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">

                                <div id="imageShow">
                                    @if (!empty($admin->image))
                                        <img src="{{ asset('storage/' . $admin->image) }}" class="img-thumbnail"
                                            style="height: 100px; width: 120px;">
                                    @endif
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn update_btn mt-5 w-25">Update</button>
                    </form>
                </div>
            </div>

        </section>
    </div>
@endsection
@push('script')
    <script>
        $(function() {
            // Image preview with JavaScript
            var previewImages = function(input, image) {
                if (input.files) {
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        $($.parseHTML(
                            '<img class="img-thumbnail" style="height: 100px; width: 120px;">'
                        )).attr('src', event.target.result).appendTo(image);
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            }
            $(document).on('change', '.imageField', function() {
                $('#imageShow img:last-child').remove();
                previewImages(this, '#imageShow');
            });
        });
    </script>
@endpush