@extends('layouts.layout')
@section('title', 'Update Tanda Tangan')
<link rel="stylesheet" href="{{ asset('css/jquery.fancybox.css') }}">
<link rel="stylesheet" href="{{ asset("css/style.css") }}">
<link rel="stylesheet" href="{{ asset("css/button-alat.css") }}">
@section('content')
<section>
    <div class="row my-5 mx-4">
        <div class="col-12 col-lg-5 order-2 order-lg-1 mt--2 text-center">
            <img src="{{ asset('img/qrcode.svg') }}" class="hero-img" style="
                width: 210px;
            ">
        </div>
        <div class="col-12 col-lg-7 order-1 order-lg-2" style="display: grid; align-content: center; align-items: center;">
            <h2><span class="badge text-light" style="
                background: linear-gradient(135deg, #32263E 0%, #231E22 100%);
                text-transform: capitalize; padding: 10px; border-radius: 12px;
                letter-spacing: 0.3px;
            ">Tanda Tangan Digital</span></h2>
            <h1 class="text-white" style="font-weight: 700; font-size: 35px;">Update Tanda Tangan</h1>
            <h3 class="text-white" style="font-weight: 400;">Kelola Tanda Tangan Kepala Desa {{ $desa->nama_desa }}</h3>
        </div>
    </div>
</section>

<section>
    <h3 class="text-center text-white pt-1">Upload Tanda Tangan Digital Kepala Desa/Kelurahan {{ $desa->nama_desa }}</h3>
    <div class="shadow border-0" style="
        border-radius: 40px;
        background: linear-gradient(135deg, #32263E 0%, #231E22 100%);
    ">
        <div class="card-body px-lg-5 py-lg-5">
            <form autocomplete="off" action="{{ route("ttd-kades.doUpdate", $ttd->id) }}" enctype="multipart/form-data" method="post" data-redirect="{{ route('surat.index') }}">
                @csrf
                <div class="form-group mb-3">
                    <label class="form-control-label text-light" style="font-size: 15px; font-weight: 600;">Tanda Tangan Kepala Desa</label>
                    <input required class="form-control form-control-alternative" name="signature_file" autofocus type="file" style="color: #404040; font-weight: 500; border-radius: 13px;">
                    <div id="file-ttdHelp" class="form-text text-xs text-light" style="font-weight: 500;">masukkan gambar tanda tangan kepala desa max 2 MB berupa .jpeg, .png, atau .bmp</div>
                </div>
                <div class="form-group mt-4 text-center">
                    <input type="hidden" name="desa_id" value="{{ $desa->id }}">
                    <a data-toggle="modal" class="btn px-4" href="#modal-update" style="background-color: #F7A4A4; color: #404040; border-radius: 13px;">Simpan</a>
                    <a type="button" class="btn pink ml-3" style="border-color: #F7A4A4; border-radius: 13px;" href="{{ asset('surat') }}">Kembali</a>
                </div>
                <hr class="solid" style="border-radius: 8px; border-top: 3px solid #F3F4F8; opacity: 0.2;">
                <div class="card-body px-lg-5 py-lg-5 bg-white" style="border-radius: 32px;">
                    <div class="row mt-3">
                        <div class="col-lg-6 col-12">
                            <h4>Preview Tanda Tangan : </h4>
                            <img src="{{ asset(Storage::url($ttd->signature_file)) }}" alt="" class="img-fluid">
                        </div>

                        <div class="col-lg-6 col-12">
                            <h4>Preview QrCode :</h4>
                            <img class="img-fluid" src="data:image/svg+xml;base64, {{base64_encode(QrCode::format('svg')->size(400)->generate(url('/ttd-kades-qr/' . $ttd->encrypted_id)))}}">
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="modal-update" tabindex="-1" role="dialog" aria-labelledby="modal-update" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content" style="background: linear-gradient(135deg, #32263E 0%, #231E22 100%);">
                            <div class="modal-body">
                                <div class="py-3 text-center">
                                    <h3 class="text-white">Apakah Anda ingin mengunggah tanda tangan?</h3>
                                    <p class="text-sm text-white">Pastikan data yang Anda masukkan sudah benar</p>
                                </div>
                            </div>
                            <div class="modal-footer justify-content-center mt--5">
                                <div class="row">
                                    <div class="col-md">
                                        <form action="{{ route("ttd-kades.doUpdate", $ttd->id) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="btn" id="simpan" style="background: #F7A4A4; border-radius: 10px;"><i class="fas fa-check"></i> Yakin</button>
                                            <button type="button" class="btn btn-link" style="color: #F7A4A4;" data-dismiss="modal"><i class="fas fa-times-circle"></i> Tidak</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            {{-- <div class="col-md-6 card p-2 " style="border-radius: 32px; background: white; margin: auto;">
                <div class="dash" style="border: 2px dashed black; border-radius: 30px;">
                    <div class="text-center" >
                        <img src="{{ asset('img/form-logo.svg') }}" style="margin-top: 25px; margin-bottom: 25px;  width: 50px">
                        <h2 class="text-dark" style="font-weight: 700; font-size: 20px; margin-bottom: 25px;">Upload File Tanda Tangan Disini</h2>
                        <label for="upload-photo" class="p-2" style="background: linear-gradient(135deg, #5E72E4 0%, #825EE4 100%); color: white; border-radius: 13px; cursor: pointer;">Pilih Photo Tanda Tangan</label>
                        <input type="file" name="photo" id="upload-photo" style="opacity: 0; position: absolute; z-index: -1;"/>
                    </div>
                    <h4 class="text-center text-xs mt-2" style="font-weight: 700; margin-bottom: 25px;">upload file dengan format .jpeg, png. atau .bmp dengan maksimal 2 MB</h4>
                    <p style="font-weight: 500; font-size: 12px" class="text-center"></p>
                </div>
            </div>
            <hr class="solid" style="border-radius: 8px; border-top: 3px solid #F3F4F8; opacity: 0.2;">
            <div class="card-body px-lg-5 py-lg-5 bg-white" style="border-radius: 32px;">
                <div class="row mt-3">
                    <div class="col-lg-6 col-12">
                        <h4>Preview Tanda Tangan : </h4>
                        <img src="{{ asset(Storage::url($ttd->signature_file)) }}" alt="" class="img-fluid">
                    </div>

                    <div class="col-lg-6 col-12">
                        <h4>Preview QrCode :</h4>
                        <img class="img-fluid" src="data:image/svg+xml;base64, {{base64_encode(QrCode::format('svg')->size(400)->generate(url('/ttd-kades-qr/' . $ttd->encrypted_id)))}}">
                    </div>
                </div>
            </div> --}}
        </div>
    </div>
</section>
@endsection

@push('scripts')

@endpush