@extends('layouts.admin.index')

@section('content')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Home - <span class="fw-normal">Update Profile</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item">Home</a>
                    <span class="breadcrumb-item active">Update Profile</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="content">

        <div class="card">
            <div class="card-body border-top">
                <form id="add-category-form" action="{{ route('update.profile') }}" enctype="multipart/form-data"
                    method="POST">
                    {!! csrf_field() !!}

                    <div class="row mb-3">
                        <label class="col-lg-3 col-form-label">Name:</label>
                        <div class="col-lg-9">
                            <input type="text" name="name" class="form-control" value="{{ $data['name'] }}"
                                placeholder="Enter name">
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-lg-3 col-form-label">Email:</label>
                        <div class="col-lg-9">
                            <input type="text" name="email" class="form-control" value="{{ $data['email'] }}"
                                placeholder="Enter email" readonly>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-lg-3 col-form-label">Timezone:</label>
                        <div class="col-lg-9">
                            {{-- {{ Form::select('timezone', $timezones, $userTimezone, [
                                'class' => 'form-select multiselect',
                                'id' => 'promocode-for',
                                'required' => 'required',
                                'data-enable-filtering' => true,
                                'data-enable-case-insensitive-filtering' => true,
                            ]) }} --}}

                            <select id="advisor-select" class="form-control multiselect" name="timezone"
                                data-enable-filtering="true" data-enable-case-insensitive-filtering="true" required>
                                <option value="">Select</option>
                                @foreach ($timezones as $timezone)
                                    <option value="{{ $timezone }}" {{ $timezone == $userTimezone ? 'selected' : '' }}>
                                        {{ $timezone }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-lg-3 col-form-label">Image:</label>
                        <div class="col-lg-9">
                            <input type="file" name="image" class="form-control">
                            <div class="form-text text-muted">Accepted formats: gif, png, jpg. Max file size 2Mb</div>
                        </div>
                    </div>

                    <div class="row mb-3 {{ $data['image'] == null ? 'd-none' : '' }}">
                        <label class="col-lg-3 col-form-label"></label>
                        <div class="col-lg-9">
                            <div class="row">
                                <div class="col-sm-6 col-xl-3">
                                    <div class="card">
                                        <div class="card-img-actions mx-1 mt-1">
                                            <img class="card-img img-fluid" src="{{ $data['image'] }}" alt="">
                                            <div class="card-img-actions-overlay card-img">
                                                <a href="{{ $data['image'] }}"
                                                    class="btn btn-outline-white btn-icon rounded-pill"
                                                    data-bs-popup="lightbox" data-gallery="gallery1">
                                                    <i class="ph-plus"></i>
                                                </a>
                                                <a href="#" class="btn btn-outline-white btn-icon rounded-pill ms-2">
                                                    <i class="ph-link"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-end">
                        <button type="submit" class="btn btn-primary">Submit <i
                                class="ph-paper-plane-tilt ms-2"></i></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {

        });
    </script>
@endsection

@section('style')
    <style>
        .form-control-feedback-icon i.ph-magnifying-glass.text-muted {
            display: none;
        }

        .badge-secondary {
            background-color: #6B6F82;
        }

        .badge,
        .badge[class*=badge-] a {
            color: #FFF;
        }
    </style>
@endsection