@extends('admin.layout.layout')
@section('content')
<main class="main">
    <section class="section-box shop-template mt-60">
        <div class="container">
            <div class="row mb-100">
                <div class="col-lg-1"></div>
                <div class="col-lg-5">
                    <h3>Document Upload</h3>
                    <p class="font-md color-gray-500">My Documents</p>
                    @if (Session::has('error_message'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Error! </strong> {{ Session::get('error_message')}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif
                    @if (Session::has('success_message'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>Well done! </strong> {{ Session::get('success_message')}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif

                    @if ($errors->any())

                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    @endif
                    <form action="{{ route('save-vendor-document') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-register mt-30 mb-30">
                            {{-- @if($document) --}}
                            <div class="form-group">
                                <label class="mb-5 font-sm color-gray-700">Type *</label>
                                <select name="type" class="form-control select" id="sectionId">
                                    <option value="">choose document type</option>
                                    <option value="NIN" @if($document) {{ "NIN" == $document->type ? 'selected' : '' }} @endif>NIN</option>
                                    <option value="DRIVER'S LICENSE" @if($document) {{ "DRIVER'S LICENSE" == $document->type ? 'selected' : '' }}  @endif>DRIVER'S LICENSE</option>
                                    <option value="OTHER" @if($document) {{ "OTHER" == $document->type ? 'selected' : '' }}  @endif>OTHER</option>
                                </select>
                            </div>
                            <div class="form-group" @if($document && $document->specify) @else style="display:none;" @endif id="optionsField">
                                <label class="mb-5 font-sm color-gray-700"></label>
                                <input class="form-control" type="text" name="specify" @if($document && $document->specify) value="{{ $document->specify }}" @endif placeholder="specify document"  >
                            </div>
                            <div class="form-group">
                                <label class="mb-5 font-sm color-gray-700">Front *</label>
                                <input class="form-control" type="file" name="front" id="uploadFront" accept=".jpg, .jpeg, .png, image/jpeg, image/png">
                                <div id="image-preview-container1" class="image-preview-container mt-2">
                                    <!-- Preview images will be displayed here -->
                                    <img id="imageFront" @if($document && $document->front) src="{{ $document->front }}"  @else src="" style="display:none" @endif  alt="Image Preview" style="width: 100px; height: 100px" />
                                </div>
                            </div>
                            {{-- @endif --}}
                            <div class="form-group">
                                <label class="mb-5 font-sm color-gray-700">Back *</label>
                                <input class="form-control" type="file" id="uploadBack"  name="back" accept=".jpg, .jpeg, .png, image/jpeg, image/png">
                                <div id="image-preview-container1" class="image-preview-container mt-2">
                                    <!-- Preview images will be displayed here -->
                                    <img id="imageBack" @if($document && $document->back) src="{{ $document->back }}" @else src="" style="display:none" @endif  alt="Image Preview" style="width: 100px; height: 100px" />
                                </div>
                            </div>
                            <div class="form-group" style="visibility: hidden;">
                                <label>
                                    <input class="checkagree" type="checkbox">By clicking Register button, you agree our terms and policy,
                                </label>
                            </div>
                            <div class="form-group">
                                <input class="font-md-bold btn btn-buy" type="submit" @if($document) value="Update now" @else value="Upload Now" @endif>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </section>
    <section class="section-box box-newsletter">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-7 col-sm-12">
                    <h3 class="color-white">Subscrible &amp; Get <span class="color-warning">10%</span> Discount</h3>
                    <p class="font-lg color-white">Get E-mail updates about our latest shop and <span class="font-lg-bold">special offers.</span></p>
                </div>
                <div class="col-lg-4 col-md-5 col-sm-12">
                    <div class="box-form-newsletter mt-15">
                        <form class="form-newsletter">
                            <input class="input-newsletter font-xs" value="" placeholder="Your email Address">
                            <button class="btn btn-brand-2">Sign Up</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

@endsection

@section('js')
<script>
    // document.getElementById('holderField').style.display = 'block';
    document.getElementById('sectionId').addEventListener('change', function() {
        if (this.value === 'OTHER') {
            document.getElementById('optionsField').style.display = 'block';
            // document.getElementById('holderField').style.display = 'none';
        } else {
            document.getElementById('optionsField').style.display = 'none';
            // document.getElementById('holderField').style.display = 'block';
        }
    });

    document.getElementById('uploadFront').addEventListener('change', function(event) {
        var imagePreview = document.getElementById('imageFront');
        var file = event.target.files[0];

        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                imagePreview.style.display = 'block'; // Show the preview image
            };
            reader.readAsDataURL(file); // Convert the file to a data URL
        }
    });
    document.getElementById('uploadBack').addEventListener('change', function(event) {
        var imagePreview = document.getElementById('imageBack');
        var file = event.target.files[0];

        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                imagePreview.style.display = 'block'; // Show the preview image
            };
            reader.readAsDataURL(file); // Convert the file to a data URL
        }
    });
</script>
@endsection