@extends('layouts.mobile')

@section('contents')
    @include('partials.mobile.footbar')
    <main class="form-signin w-100 m-auto">
        <div class="min-h-100 d-flex w-100 align-items-center">
            <div class="w-100">
                <div class="bg-glass p-4 pt-5 rounded-5 position-relative mb-3">
                    <div class="position-absolute bg-white rounded-circle p-2 border border-dark border-3"
                        style=";top: -70px;left:50%;margin-left:-40px;">
                        <svg style="height: 80px;width:80px">
                            <use xlink:href="#user"></use>
                        </svg>
                    </div>
                    <table class="w-100">
                        <tr>
                            <td style="width: 100px">Nama</td>
                            <td style="width: 10px">:</td>
                            <td>
                                <div id="name-text">
                                    <span>{{ $user->name }}</span>
                                    <a href="#" id="name-trigger" class="text-white ms-2"><svg width="18"
                                            width="18" style="height: 18px">
                                            <use xlink:href="#edit"></use>
                                        </svg></a>
                                </div>
                                <form method="post" id="name-form" class="d-none">
                                    @csrf
                                    <div class="input-group">
                                        <input type="text" name="nama" class="form-control"
                                            value="{{ $user->name }}" />
                                        <button class="btn btn-success" type="submit">Go</button>
                                    </div>
                                </form>
                            </td>
                        </tr>
                        <tr>
                            <td>Role</td>
                            <td>:</td>
                            <td>{{ $user->team }}</td>
                        </tr>
                        <tr>
                            <td>Area</td>
                            <td>:</td>
                            <td>{{ @$user->area }}</td>
                        </tr>
                        <tr>
                            <td>Lokasi</td>
                            <td>:</td>
                            <td>{{ @$checkin->latitude }}, {{ @$checkin->longitude }}</td>
                        </tr>
                        <tr>
                            <td>Channel</td>
                            <td>:</td>
                            <td>{{ @$checkin->channel }}</td>
                        </tr>
                        <tr>
                            <td>Last Check-in</td>
                            <td>:</td>
                            <td>{{ date('d/m/y H:i:s', strtotime(@$checkin->date)) }}</td>
                        </tr>
                    </table>
                </div>
                <div class="text-center pt-2 text-white fw-bold">Report</div>
                <div class="bg-glass p-4 rounded-5 mb-4">
                    <table class="w-100">
                        <tr>
                            <td style="width: 200px">Jumlah sampling Experience</td>
                            <td style="width: 10px">:</td>
                            <td>{{ $sampling->count }}</td>
                        </tr>
                        <tr>
                            <td>Jumlah sampling</td>
                            <td>:</td>
                            <td>{{ $user->sampling }}</td>
                        </tr>
                        <tr>
                            <td>Jumlah selling</td>
                            <td>:</td>
                            <td>{{ @$selling->count }}</td>
                        </tr>
                    </table>
                </div>
                <form method="post">
                    @csrf
                    <div class="form-group mb-3 px-3">
                        <input type="number" class="form-control" required name="qty" autocomplete="off"
                            placeholder="Jumlah sampling" />
                    </div>
                    <div class="form-group text-center">
                        <button class="btn btn-success px-4" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </main>
@endsection

@push('scripts')
    <script>
        (() => {
            'use strick'

            const fr = document.querySelector('#name-form')
            const ln = document.querySelector('#name-trigger')
            const tx = document.querySelector('#name-text')

            ln.addEventListener('click', () => {
                tx.classList.add('d-none')
                fr.classList.remove('d-none')
            })
        })()
    </script>
@endpush