@extends('layouts.layout')

@section('title', 'Masuk')

@section('header')
<div style="display: flex;gap:10px;justify-content: center; margin-bottom: 50px;">
    <img src="{{ asset('img/logoklipaaputih.png') }}" style="width: 28px;height: 29px;margin-top:5px">
    <span style="font-weight: bold; font-size: 25px; color:white; text-transform: capitalize;">Klipaa Surat</span>
</div>
@endsection

@section('content')
<h1 style='color:white;text-align: center;margin-bottom: 50px; font-size: 25px; font-weight: 700;'>Selamat Datang di Layanan Surat Desa</h1>
<div class="row justify-content-center pb-5">
    <div class="col-lg-5 col-md-7">
        <div class="card shadow border-0" style="border-radius: 20px;background: linear-gradient(135deg, #32263E 0%, #231E22 100%);">
            <div class="card-body px-lg-5 py-lg-5">
                <p class="text-center" style="color: white;font-weight: 500;font-size: 14px">Silakan masuk terlebih dahulu untuk menggunakan Layanan Klipaa Surat</p>
                <form role="form" action="{{ route('masuk') }}" method="POST">
                    @csrf
                    @if (isset($error))
                        <div class="alert alert-danger">{{$error}}</div>
                    @endif
                    <div class="form-group mb-3">
                        <div class="input-group input-group-alternative" >
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.99988 0.833008C7.16002 0.833008 6.35457 1.16664 5.7607 1.7605C5.16684 2.35437 4.83321 3.15982 4.83321 3.99967C4.83321 4.83953 5.16684 5.64498 5.7607 6.23885C6.35457 6.83271 7.16002 7.16634 7.99988 7.16634C8.83973 7.16634 9.64518 6.83271 10.239 6.23885C10.8329 5.64498 11.1665 4.83953 11.1665 3.99967C11.1665 3.15982 10.8329 2.35437 10.239 1.7605C9.64518 1.16664 8.83973 0.833008 7.99988 0.833008ZM5.83321 3.99967C5.83321 3.42504 6.06148 2.87394 6.46781 2.46761C6.87414 2.06128 7.42524 1.83301 7.99988 1.83301C8.57451 1.83301 9.12561 2.06128 9.53194 2.46761C9.93827 2.87394 10.1665 3.42504 10.1665 3.99967C10.1665 4.57431 9.93827 5.12541 9.53194 5.53174C9.12561 5.93807 8.57451 6.16634 7.99988 6.16634C7.42524 6.16634 6.87414 5.93807 6.46781 5.53174C6.06148 5.12541 5.83321 4.57431 5.83321 3.99967ZM7.99988 8.16634C6.45787 8.16634 5.03654 8.51701 3.98387 9.10901C2.94654 9.69301 2.16654 10.577 2.16654 11.6663V11.7343C2.16587 12.509 2.16521 13.481 3.01787 14.1757C3.43721 14.517 4.02454 14.7603 4.81787 14.9203C5.61254 15.0817 6.64921 15.1663 7.99988 15.1663C9.35054 15.1663 10.3865 15.0817 11.1825 14.9203C11.9759 14.7603 12.5625 14.517 12.9825 14.1757C13.8352 13.481 13.8339 12.509 13.8332 11.7343V11.6663C13.8332 10.577 13.0532 9.69301 12.0165 9.10901C10.9632 8.51701 9.54254 8.16634 7.99988 8.16634ZM3.16654 11.6663C3.16654 11.099 3.58121 10.483 4.47387 9.98101C5.35121 9.48767 6.59654 9.16634 8.00054 9.16634C9.40321 9.16634 10.6485 9.48767 11.5259 9.98101C12.4192 10.483 12.8332 11.099 12.8332 11.6663C12.8332 12.5383 12.8065 13.029 12.3505 13.3997C12.1039 13.601 11.6905 13.7977 10.9839 13.9403C10.2792 14.083 9.31588 14.1663 7.99988 14.1663C6.68388 14.1663 5.71987 14.083 5.01587 13.9403C4.30921 13.7977 3.89587 13.601 3.64921 13.4003C3.19321 13.029 3.16654 12.5383 3.16654 11.6663Z" fill="#6B7280"/>
                                        </svg>

                                </span>
                            </div>
                            <input class="form-control @error('username') is-invalid @enderror" name="username"
                            value="{{ old('username') }}" required autocomplete="username" autofocus placeholder="Username" style="color: black" type="text" >
                            @error('username')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group input-group-alternative">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.37496 6.75249V5.66666C3.37496 4.17481 3.96759 2.74407 5.02248 1.68918C6.07738 0.634289 7.50812 0.0416565 8.99996 0.0416565C10.4918 0.0416565 11.9225 0.634289 12.9774 1.68918C14.0323 2.74407 14.625 4.17481 14.625 5.66666V6.75249C14.8141 6.76582 14.9916 6.78249 15.16 6.80582C15.91 6.90582 16.5416 7.12249 17.0433 7.62332C17.545 8.12499 17.76 8.75666 17.8616 9.50666C17.9583 10.2292 17.9583 11.1483 17.9583 12.2875V12.3792C17.9583 13.5183 17.9583 14.4375 17.8616 15.16C17.76 15.91 17.545 16.5417 17.0433 17.0433C16.5416 17.545 15.91 17.76 15.16 17.8617C14.4375 17.9583 13.5183 17.9583 12.3791 17.9583H5.62079C4.48163 17.9583 3.56246 17.9583 2.83996 17.8617C2.08996 17.76 1.45829 17.545 0.956626 17.0433C0.454959 16.5417 0.239959 15.91 0.139126 15.16C0.041626 14.4375 0.041626 13.5183 0.041626 12.3792V12.2875C0.041626 11.1483 0.041626 10.2292 0.139126 9.50666C0.239126 8.75666 0.455793 8.12499 0.956626 7.62332C1.45829 7.12166 2.08996 6.90666 2.83996 6.80582C3.01764 6.78202 3.19608 6.76424 3.37496 6.75249ZM4.62496 5.66666C4.62496 4.50633 5.0859 3.39354 5.90637 2.57306C6.72684 1.75259 7.83964 1.29166 8.99996 1.29166C10.1603 1.29166 11.2731 1.75259 12.0936 2.57306C12.914 3.39354 13.375 4.50633 13.375 5.66666V6.71082C13.0641 6.70832 12.7316 6.70832 12.3791 6.70832H5.62079C5.26829 6.70832 4.93663 6.70832 4.62496 6.71082V5.66666ZM1.84079 8.50749C2.07163 8.27666 2.39496 8.12666 3.00746 8.04416C3.63579 7.95999 4.47079 7.95832 5.66663 7.95832H12.3333C13.5291 7.95832 14.3633 7.95999 14.9933 8.04416C15.605 8.12666 15.9283 8.27749 16.1591 8.50749C16.39 8.73832 16.54 9.06166 16.6225 9.67416C16.7066 10.3033 16.7083 11.1375 16.7083 12.3333C16.7083 13.5292 16.7066 14.3633 16.6225 14.9933C16.54 15.605 16.3891 15.9283 16.1591 16.1592C15.9283 16.39 15.605 16.54 14.9925 16.6225C14.3633 16.7067 13.5291 16.7083 12.3333 16.7083H5.66663C4.47079 16.7083 3.63579 16.7067 3.00663 16.6225C2.39496 16.54 2.07163 16.3892 1.84079 16.1592C1.60996 15.9283 1.45996 15.605 1.37746 14.9925C1.29329 14.3633 1.29163 13.5292 1.29163 12.3333C1.29163 11.1375 1.29329 10.3025 1.37746 9.67332C1.45996 9.06166 1.61079 8.73832 1.84079 8.50749Z" fill="#9CA3AF"/>
                                        </svg>
                                </span>
                            </div>
                            <input class="form-control @error('password') is-invalid @enderror"
                            style="color: black" name="password" required autocomplete="current-password" placeholder="Password" type="password" value="{{ old('password') }}">
                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn" style="width: 100%;
                        color: #404040; background-color: #FFFFFF;
                    ">Masuk</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        $(document).on("submit","form", function () {
            $(this).find("button:submit").attr('disabled','disabled');
            $(this).find("button:submit").html(`<img height="20px" src="{{ url('/storage/loading.gif') }}" alt=""> Loading ...`);
        });
    });
</script>
@endpush