@extends('layouts.main')

@section('container')
    <form method="POST" cemes="form" action="{{ $url ?? route('admin.showroom.save') }}"
        cemes-redirect="{{ route('admin.showroom.index', 'prospect') }}">
        @csrf
        <div class="row justify-content-around">
            <div class="col-12 col-lg-6">
                <div class="card">
                    <div class="card-header">Info Dasar</div>
                    <div class="card-body">
                        <div class="text-center mb-4">
                            <div id="upload_logo_showroom"
                                style="background-color:rgb(46, 40, 40); overflow:hidden;height: 260px;"
                                class="d-flex justify-content-center align-items-center">
                                <img src="" id="output" style="height: 260px; object-fit:contain">
                            </div>
                            <div class="form-group mb-0">
                                <input type="file" accept=".jpg,.jpeg,.png" hidden name="logo_showroom_file"
                                    id="logo_showroom" onchange="uploadSingle(event)" accept="jpg,jpeg,png"
                                    data-input-name="logo_showroom" data-upload-container="#upload_logo_showroom"
                                    data-upload-url="{{ route('api.upload.logo-showroom') }}">
                                <button type="button" class="btn btn-sm btn-block btn-primary"
                                    onclick="$('#logo_showroom').trigger('click')">Upload Logo Showroom</button>
                                <p class="text-gray">*Logo Showroom yang ditampilkan pada halaman utama Showroom</p>
                            </div>
                        </div>
                        <div class="" id="section-meta">
                            <div class="form-group row">
                                <label for="name" class="col-form-label col-sm-3">Nama Showroom</label>
                                <div class="col-sm-9">
                                    <input type="text" name="name" id="name" class="form-control" placeholder=""
                                        value="">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="type" class="col-form-label col-sm-3">Jenis Showroom</label>
                                <div class="col-sm-9">
                                    <select name="type" id="type" class="form-control select2">
                                        <option value="BARU">Jual Mobil Baru</option>
                                        <option value="BEKAS">Jual Mobil Bekas</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="owner_name" class="col-form-label col-sm-3">Nama Owner</label>
                                <div class="col-sm-9">
                                    <input type="text" name="owner_name" id="owner_name" class="form-control"
                                        placeholder="" value="">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="owner_phone" class="col-form-label col-sm-3">Kontak Owner</label>
                                <div class="col-sm-9">
                                    <input type="text" name="owner_phone" id="owner_phone" class="form-control"
                                        placeholder="" value="">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="owner_email" class="col-form-label col-sm-3">Email Owner</label>
                                <div class="col-sm-9">
                                    <input type="text" name="owner_email" id="owner_email" class="form-control"
                                        placeholder="" value="">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="user_id" class="col-form-label col-sm-3">Akun</label>
                                <div class="col-sm-9">
                                    <select name="user_id" id="user_id" class="form-control select2 mb-2"
                                        style="width: 100%">
                                        <option value="">
                                        </option>
                                    </select>
                                    <p class="text-gray">*Pilih Akun pengguna yang dapat mengakses Dashboard Showroom ini.
                                    </p>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="sales_id" class="col-form-label col-sm-3">Sales</label>
                                <div class="col-sm-9">
                                    <select name="sales_id" id="sales_id" class="form-control select2 mb-2"
                                        style="width: 100%">
                                        <option value="">
                                        </option>
                                    </select>
                                    <p class="text-gray">*Pilih Akun Sales yang bertanggung jawab atas Showroom ini</p>
                                </div>
                            </div>
                        </div>
                        <div id="section-address" class="mt-2">
                            <h6>Lokasi</h6>
                            <hr>
                            <div class="form-group row">
                                <label for="address" class="col-form-label col-sm-3">Alamat</label>
                                <div class="col-sm-9">
                                    <textarea name="address" class="form-control" id="address" placeholder="" cols="30" rows="2"></textarea>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="province" class="col-form-label col-sm-3">Provinsi</label>
                                <div class="col-sm-9">
                                    <select type="text" id="province" name="province" onchange="getCity()"
                                        style="width: 100%" class="form-control select2">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="city" class="col-form-label col-sm-3">Kota</label>
                                <div class="col-sm-9">
                                    <select type="text" id="city" name="city" onchange="getDistrict()"
                                        style="width: 100%" class="form-control select2">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="district" class="col-form-label col-sm-3">Kecamatan</label>
                                <div class="col-sm-9">
                                    <select type="text" id="district" name="district" onchange="getVillage()"
                                        style="width: 100%" class="form-control select2">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="village" class="col-form-label col-sm-3">Kelurahan</label>
                                <div class="col-sm-9">
                                    <select type="text" id="village" name="village" onchange="getPostalCode()"
                                        style="width: 100%" class="form-control select2">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="village" class="col-form-label col-sm-3">Kode Pos</label>
                                <div class="col-sm-9">
                                    <input type="text" name="postalcode" id="postalcode" class="form-control"
                                        placeholder="" value="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="card">
                    <div class="card-header">Data Lengkap</div>
                    <div class="card-body">
                        <div id="section-bank" class="mb-5">
                            <h6>Informasi Bank</h6>
                            <hr>
                            <div class="form-group row">
                                <label for="bank" class="col-form-label col-sm-3">Nama Bank</label>
                                <div class="col-sm-9">
                                    <select name="bank" id="bank" class="form-control select2 mb-2"
                                        style="width: 100%">
                                        <option value=""></option>
                                        @foreach (getBankProvider() as $b)
                                            <option value="{{ $b }}">
                                                {{ $b }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="account_name" class="col-form-label col-sm-3">Nama Pemilik</label>
                                <div class="col-sm-9">
                                    <input type="text" name="account_name" id="account_name" class="form-control"
                                        placeholder="" value="">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="account_name" class="col-form-label col-sm-3">Nomor Rekening</label>
                                <div class="col-sm-9">
                                    <input type="number" name="account_number" id="account_number" class="form-control"
                                        placeholder="" value="">
                                </div>
                            </div>
                        </div>
                        <div id="section-document">
                            <h6>Foto/Dokumen/Lampiran</h6>
                            <hr>
                            <section class="col-12 mb-4">
                                <label for="foto_ktp">Foto KTP Pemilik</label>
                                <input hidden type="file" name="foto_ktp_file" id="foto_ktp"
                                    onchange="uploadSingle(event)" accept=".jpg,.jpeg,.png"
                                    data-upload-container="#upload_ktp_preview" data-input-name="foto_ktp"
                                    data-upload-url="{{ route('api.upload.ktp-showroom') }}">
                                <div id="upload_ktp_preview"
                                    style="background-color:rgb(46, 40, 40); overflow:hidden;height: 260px;">
                                    <img src="" alt="" style="height: 200px">
                                </div>
                                <button type="button" class="btn btn-sm btn-block btn-primary"
                                    onclick="$('#foto_ktp').trigger('click')">Upload/Ganti</button>
                            </section>

                            <section class="col-12 mb-4">
                                <label for="foto_showroom">Foto Showroom</label>
                                <input hidden type="file" multiple name="foto_showroom_file" id="foto_showroom"
                                    onchange="uploadCarousel(event)" accept=".jpg,.jpeg,.png" data-no-reset="true"
                                    data-input-name="foto_showroom[]" data-upload-container="#upload_foto_showroom"
                                    data-child-component="showroom"
                                    data-upload-url="{{ route('api.upload.foto-showroom') }}">
                                <div id="upload_foto_showroom" class="d-flex"
                                    style="
                                overflow-y: auto;
                                height: 260px;
                                padding: 1em 0;
                                background-color: rgb(245, 245, 245);">

                                </div>

                                <button type="button" class="btn btn-sm btn btn-block btn-primary"
                                    onclick="$('#foto_showroom').trigger('click')">Upload</button>
                            </section>
                            <section class="col-12 mb-4">
                                <label for="document_showroom">Dokumen Showroom</label>
                                <input hidden type="file" multiple name="document_showroom_file"
                                    id="document_showroom" onchange="uploadCarousel(event)" accept=".pdf"
                                    data-no-reset="true" data-upload-container="#upload_document_showroom"
                                    data-input-name="document_showroom[]" data-child-component="document"
                                    data-upload-url="{{ route('api.upload.document-showroom') }}">
                                <div id="upload_document_showroom" class="mt-4"
                                    style="overflow-y: scroll; height: 260px; padding: 1em 0;background-color: rgb(245, 245, 245);">
                                </div>

                                <button type="button" class="btn btn-sm btn-block btn-primary"
                                    onclick="$('#document_showroom').trigger('click')">Upload</button>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card">
                        <div class="card-body">
                            <button type="submit" class="btn btn-primary float-right">Submit</button>
                            <a href="{{ route('admin.showroom.index', 'prospect') }}" class="btn btn-default">Cancel</a>
                        </div>
                </div>
            </div>
    </form>
@endsection

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

            $.get('{{ route('admin.old.showroom.salesperson') }}').done(data => {
                console.log(data)
                console.log(data.result)
                $('select#sales_id').append(`<option value="">(Kosongkan)</option>`)
                data.result.forEach(e => {
                    $('select#sales_id').append(`<option value="${e.id}">${e.name}</option>`)
                })
            })
            $.get('{{ route('admin.old.showroom.useraccount') }}').done(data => {
                $('select#user_id').append(`<option value="">(Kosongkan)</option>`)
                data.result.forEach(e => {
                    $('select#user_id').append(
                        `<option value="${e.id}">${e.name} (${e.phone})</option>`)
                })
            })
        });
    </script>
@endsection