@extends('layouts.administrator.master')

@section('title')
    Kontak
@endsection
@push('script')
    <script>
        $(document).ready(function() {
            var tab = '{{ session('tab') }}';
            $('#tab' + tab).tab('show');
        });
    </script>
@endpush
@section('content')
    <div class="nk-block-head">
        <div class="nk-block-head-content">
            <div class="nk-block-between-md g-4">
                <div class="nk-block-head-content">
                    <h3 class="nk-block-title page-title">
                        Kontak
                    </h3>
                    <div class="nk-block-des">
                        <p>Kamu mempunyai akses untuk mengelola halaman kontak</p>
                    </div>
                </div>
                <div class="nk-block-head-content">
                    <a href="{{ route('admin.landingPage') }}" class="btn btn-primary btn-sm"><em
                            class="icon ni ni-arrow-left"></em>
                        Kembali</a>
                </div>
            </div>
        </div>
    </div><!-- .nk-block-head -->
    <div class="nk-block">
        <div class="card card-preview">
            <div class="card-inner">
                <div class="row g-gs">
                    <div class="col-md-4">
                        <ul class="nav link-list-menu border border-light rounded m-0" role="tablist">
                            <li><a id="tab1" class="active" data-bs-toggle="tab" href="#tabContact"
                                    aria-selected="true" role="tab">Kontak</a></li>
                            <li><a id="tab2" data-bs-toggle="tab" href="#tabContactData" aria-selected="false"
                                    role="tab" class="" tabindex="-1">Data Kontak</a></li>
                        </ul>
                    </div>
                    <div class="col-md-8">
                        <div class="tab-content">
                            <div class="tab-pane active show" id="tabContact" role="tabpanel">
                                <form action="{{ route('admin.services.landingPage.contact.update') }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="form-group">
                                        <label class="form-label" for="customFileLabel">Gambar <span
                                                class="text-danger">(Format : png, jpg, jpeg, dan maksimal
                                                512kb)</span></label>
                                        <div class="form-control-wrap text-center">
                                            @if ($contactImage->value)
                                                <img id="logoOutputcontactImage"
                                                    src="{{ asset('uploads/landing-page/contact/' . $contactImage->value) }}"
                                                    alt="" width="700" height="350" style="object-fit: cover">
                                            @else
                                                <img id="logoOutputcontactImage"
                                                    src="{{ asset('') }}landing/img/noimage.png" alt=""
                                                    width="700" height="350" style="object-fit: cover">
                                            @endif
                                            <div class="form-file pt-2">
                                                <input type="file"
                                                    accept="image/png, image/gif, image/jpeg, image/svg+xml" id="customFile"
                                                    onchange="document.getElementById('logoOutputcontactImage').src = window.URL.createObjectURL(this.files[0])"
                                                    name="contactImage">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-control-wrap">
                                            <input type="text" class="form-control form-control-outlined"
                                                name="contactTitle"
                                                value="{{ $contactTitle->value ? $contactTitle->value : '' }}">
                                            <label class="form-label-outlined" for="outlined-default">Judul</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-control-wrap">
                                            <textarea name="contactDesc" class="form-control form-control-outlined" id="" cols="30" rows="10">{{ $contactDesc->value ? $contactDesc->value : '' }}</textarea>
                                            <label class="form-label-outlined" for="outlined-default">Deskripsi</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-control-wrap">
                                            <input type="number" class="form-control form-control-outlined"
                                                name="contactNoHp"
                                                value="{{ $contactNoHp->value ? $contactNoHp->value : '' }}">
                                            <label class="form-label-outlined" for="outlined-default">No Handphone</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-control-wrap">
                                            <input type="email" class="form-control form-control-outlined"
                                                name="contactEmail"
                                                value="{{ $contactEmail->value ? $contactEmail->value : '' }}">
                                            <label class="form-label-outlined" for="outlined-default">Email</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-control-wrap">
                                            <input type="text" class="form-control form-control-outlined"
                                                name="contactAddress"
                                                value="{{ $contactAddress->value ? $contactAddress->value : '' }}">
                                            <label class="form-label-outlined" for="outlined-default">Alamat</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="form-control-wrap">
                                            <input type="url" class="form-control form-control-outlined"
                                                name="contactMap"
                                                value="{{ $contactMap->value ? $contactMap->value : '' }}">
                                            <label class="form-label-outlined" for="outlined-default">URL Map <a
                                                    href=""></a></label>
                                        </div>
                                    </div>
                                    <div class="text-end">
                                        <button class="btn btn-primary" type="submit">Simpan</button>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane" id="tabContactData" role="tabpanel">
                                <table class="datatable-init nk-tb-list nk-tb-ulist" data-auto-responsive="false">
                                    <thead>
                                        <tr class="nk-tb-item nk-tb-head">
                                            <th class="nk-tb-col"><span class="sub-text">Nama</span></th>
                                            <th class="nk-tb-col"><span class="sub-text">Email</span></th>
                                            <th class="nk-tb-col"><span class="sub-text">No Hp</span></th>
                                            <th class="nk-tb-col"><span class="sub-text">Deskripsi</span></th>
                                            <th class="nk-tb-col nk-tb-col-tools text-end">
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($contactData as $key => $value)
                                            <tr class="nk-tb-item">
                                                <td class="nk-tb-col">
                                                    <div class="user-card">
                                                        <div class="user-info">
                                                            {{ $value->name }}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="nk-tb-col">
                                                    <div class="user-card">
                                                        <div class="user-info">
                                                            {{ $value->email }}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="nk-tb-col">
                                                    <div class="user-card">
                                                        <div class="user-info">
                                                            {{ $value->no_hp }}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="nk-tb-col">
                                                    <div class="user-card">
                                                        <div class="user-info">
                                                            {{ $value->description }}
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="nk-tb-col nk-tb-col-tools">
                                                    <ul class="nk-tb-actions gx-1">
                                                        <li>
                                                            <div class="drodown">
                                                                <a href="#"
                                                                    class="dropdown-toggle btn btn-icon btn-trigger"
                                                                    data-bs-toggle="dropdown"><em
                                                                        class="icon ni ni-more-h"></em></a>
                                                                <div class="dropdown-menu dropdown-menu-end">
                                                                    <ul class="link-list-opt no-bdr">
                                                                        <li><a
                                                                                href="{{ route('admin.services.landingPage.contact.delete', ['id' => $value->id]) }}"><em
                                                                                    class="icon ni ni-na"></em><span>Hapus</span></a>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr><!-- .nk-tb-item  -->
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- .nk-block -->
@endsection