@extends('layouts.page')
@section('content')
    <div class="page-header">
        <h3 class="page-title"> Data Biodata </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active" aria-current="page">Biodata</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <div class="card-body">
            <ul class="nav nav-tabs" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="biodata-tab" data-bs-toggle="pill" href="#biodata" role="tab"
                        aria-controls="biodata" aria-selected="false" tabindex="-1">
                        <i class="mdi mdi-account-circle text-light me-2"></i>
                        Biodata
                    </a>
                </li>
                @if (session('role') == 'Pengguna')
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="idcard-tab" data-bs-toggle="pill" href="#idcard" role="tab"
                            aria-controls="idcard" aria-selected="true">
                            <i class="mdi mdi-card-account-details-star text-light me-2"></i>
                            Kartu Anggota
                        </a>
                    </li>
                @endif
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="security-tab" data-bs-toggle="pill" href="#security" role="tab"
                        aria-controls="security" aria-selected="true">
                        <i class="mdi mdi-lock text-light me-2"></i>
                        Keamanan
                    </a>
                </li>
            </ul>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="biodata" role="tabpanel" aria-labelledby="biodata-tab">
                    <form method="POST" class="cmxform" id="biodataForm" action="{{ route('biodata.update') }}"
                        enctype="multipart/form-data">
                        @method('put')
                        @csrf
                        <div class="media row">
                            <div class="col-md-4 mb-5">
                                <div class="ratio ratio-4x3">
                                    <div ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"
                                        class="drop-area">
                                        <img class="me-3 w-100 h-100 object-fit-cover rounded" id="preview-image"
                                            src="{{ $data->foto ? asset('storage/user/' . $data->foto) : asset('assets/images/faces/face15.jpg') }}"
                                            alt="sample image" onclick="document.getElementById('input-image').click();">
                                        <input type="file" class="visually-hidden"
                                            value="{{ $data->foto ? asset('storage/user/' . $data->foto) : '' }}"
                                            id="input-image" name="foto"
                                            onchange="document.getElementById('preview-image').src = window.URL.createObjectURL(this.files[0])"
                                            accept=".jpg, .png, .jpeg">
                                    </div>
                                </div>
                            </div>
                            <div class="media-body col-md-8">
                                <div class="form-group">
                                    <label for="name">Nama</label>
                                    <input type="text" class="form-control" id="name" name="name"
                                        value="{{ $data->name }}">
                                </div>
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input type="email" class="form-control" id="email" name="email"
                                        value="{{ $data->email ? $data->email : '-' }}">
                                </div>
                                <div class="form-group">
                                    <label for="notelp">Telepon</label>
                                    <input type="text" class="form-control" id="notelp" name="notelp"
                                        value="{{ $data->notelp ? $data->notelp : '-' }}">
                                </div>
                                <div class="form-group">
                                    <label for="alamat">Alamat</label>
                                    <textarea class="form-control h-100" id="alamat" name="alamat" rows="6">{{ $data->alamat ? $data->alamat : '-' }}</textarea>
                                </div>
                                <button type="submit" class="btn btn-outline-success border-success">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
                @if (session('role') == 'Pengguna')
                    <div class="tab-pane fade" id="idcard" role="tabpanel" aria-labelledby="idcard-tab">
                        <div class="media row justify-content-center">
                            <div class="id-card">
                                <div style="background-image: linear-gradient(to bottom, #DA2023, #FCEEEE);" class="card border border-2 border-dark rounded-3 mt-4 custom-ratio-16x9 text-black">
                                    <div class="card-body p-3">
                                        <div class="row">
                                            <div class="col-2">
                                                <img class="custom-ratio-1x1 w-100 rounded-2"
                                                    src="{{ asset('storage/logo/' . $konfigurasi->logo) }}"
                                                    alt="">
                                            </div>

                                            <div class="col-10 text-center d-flex flex-column justify-content-center">
                                                <div class="fs-2 lh-1 fw-semibold">AIMI</div>
                                                <div class="fw-medium">{{ $konfigurasi->website }}</div>
                                            </div>
                                        </div>
                                        <div class="row px-lg-4">
                                            <div
                                                class="col-12 my-4 fs-6 d-flex flex-column flex-md-row justify-content-between">
                                                <div
                                                    class="border text-center text-md-start border-dark rounded-1 mb-3 px-2">
                                                    EXP:
                                                    {{ \Carbon\Carbon::parse($keanggotaan->created_at)->format('m/y') }} -
                                                    {{ \Carbon\Carbon::parse($keanggotaan->created_at)->addYears(2)->format('m/y') }}
                                                </div>
                                                <div
                                                    class="border text-center text-md-end border-dark rounded-1 mb-3 px-2">
                                                    {{ $keanggotaan->kode_anggota }}</div>
                                            </div>

                                            <div class="col-12 col-md-4 col-lg-3">
                                                <div class="custom-ratio-1x1 d-flex id-card-avatar w-100 mx-auto mb-5">
                                                    <img class="w-100 object-fit-contain rounded-2"
                                                        src="{{ $data->foto ? asset('storage/user/' . $data->foto) : asset('assets/images/faces/face15.jpg') }}"
                                                        alt="">
                                                </div>
                                            </div>

                                            <div class="col-12 col-md-8 col-lg-9">
                                                <div class="id-card-content">
                                                    <div class="content-items">
                                                        <div>Nama Lengkap</div>
                                                        <div>:</div>
                                                        <div>{{ $keanggotaan->nama }}</div>
                                                    </div>
                                                    <div class="content-items">
                                                        <div>Asal Instansi</div>
                                                        <div>:</div>
                                                        <div>{{ $keanggotaan->nama_perusahaan }}</div>
                                                    </div>
                                                    <div class="content-items">
                                                        <div>Cabang</div>
                                                        <div>:</div>
                                                        <div>{{ $cabang->nama }}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                <div class="tab-pane fade" id="security" role="tabpanel" aria-labelledby="security-tab">
                    <div class="media row justify-content-center">
                        <div class="col-lg-6">
                            <form method="POST" action="{{ route('biodata.update') }}" class="cmxform"
                                id="passwordForm">
                                @csrf
                                @method('put')
                                <div class="form-group">
                                    <label for="password_now">Password Saat Ini</label>
                                    <input type="password" class="form-control" id="password_now" name="password_now"
                                        required>
                                </div>
                                <div class="form-group">
                                    <label for="new_password">Password Baru</label>
                                    <input type="password" class="form-control" id="new_password" name="new_password"
                                        required>
                                </div>
                                <div class="form-group">
                                    <label for="password">Konfirmasi Password Baru</label>
                                    <input type="password" class="form-control" id="password" name="password" required>
                                </div>
                                <button type="submit" class="btn btn-outline-success border-success">Ubah
                                    Password</button>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection