@extends('layouts.layout')
@section('title', 'Info Surat Saya')
<link rel="stylesheet" href="{{ asset("css/layanan-surat_table.css") }}">
@section('content')
@include('sweetalert::alert')


<section class="pt-4">
    <div class="card 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">
        @if (isset($message))
            <div class="alert alert-success w-100">{{$message}}</div>
        @endif
        @if ($cetakSurat->count() > 0)
        <div style="overflow-x: auto;">
            <table class="table table-borderless">
                <thead>
                    <tr>
                        <th style="border: 0;">
                            <h2 class="text-light" style="
                                margin-bottom: -7px; font-weight: 700; text-transform: capitalize; display: inline-block;
                            ">Nama Surat</h2>
                        </th>
                        <th style="border: 0;">
                            <h2 class="text-light" style="
                                margin-bottom: -7px; font-weight: 700; text-transform: capitalize; display: inline-block;
                            ">Status</h2>
                        </th>
                        <th style="border: 0;">
                            <h2 class="text-light" style="
                                margin-bottom: -7px; font-weight: 700; text-transform: capitalize; display: inline-block;
                            ">Aksi</h2>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($cetakSurat as $cesu)
                        <tr>
                            <td class="text-light" style="font-size: 15px; font-weight: 500;">{{$cesu->surat->nama}}</td>
                            <td>
                                @if ($cesu->status == 1)
                                    <span class="badge text-dark" style="
                                        background-color:springgreen; padding: 10px; font-size: 13.5px; text-transform: capitalize; border-radius: 13px;
                                    ">Surat Disetujui
                                    </span>
                                @else
                                    <span class="badge text-dark" style="
                                        background-color:rgb(249, 39, 39); padding: 10px; font-size: 13.5px; text-transform: capitalize; border-radius: 13px;
                                    ">Surat Belum Disetujui
                                    </span>
                                @endif
                            </td>
                            <td>
                                @if ($cesu->status == 1)
                                    <a target="_blank" href="{{ route('cetakSurat.show', $cesu->id) }}" title="Cetak" style="
                                        font-size: 13.5px; text-transform: capitalize; color: #B2DEEC;
                                    "><i class="fas fa-print" style="font-size: 13.5px;"></i> Cetak</a>
                                @else
                                    <a href="{{ route('info-surat.edit',$cesu->id) }}" title="Edit" style="
                                        font-size: 13.5px; text-transform: capitalize; color: #B2DEEC;
                                    "><i class="fas fa-edit" style="font-size: 13.5px;"></i> Edit</a>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @endif
        @if ($cetakSurat->count() == 0)
        <div class="mx-auto" style="padding-inline: 16rem;">
            <img src="{{ asset('img/info-surat_img.svg') }}" alt="" style="width: 430px;height: 300px;
            background-position: center; background-size: cover;
        ">
        </div>
            <h1 class="text-center text-white mt-3" style="font-weight: 700; font-size: 23px;">Belum Ada Surat Yang Diajukan</h1>
            <div class="text-center mb-4 mt-3">
                <div class="row justify-content-center">
                    <div class="col">
                        <a class="btn" href="{{ asset('/info-surat') }}" style="
                            color: #404040; background-color: #F7A4A4;
                        ">Coba Lagi</a>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
</section>


<div class="modal fade" id="modal-hapus" tabindex="-1" role="dialog" aria-labelledby="modal-hapus" aria-hidden="true">
    <div class="modal-dialog modal-danger modal-dialog-centered modal-" role="document">
        <div class="modal-content bg-gradient-danger">

            <div class="modal-header">
                <h6 class="modal-title" id="modal-title-delete">Hapus Detail Surat?</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>

            <div class="modal-body">

                <div class="py-3 text-center">
                    <i class="ni ni-bell-55 ni-3x"></i>
                    <h4 class="heading mt-4">Perhatian!!</h4>
                    <p>Menghapus detail surat akan menghapus semua data yang dimilikinya</p>
                    <p><strong id="nama-hapus"></strong></p>
                </div>

            </div>

            <div class="modal-footer">
                <form id="form-hapus" action="" method="POST" >
                    @csrf @method('delete')
                    <button type="submit" class="btn btn-white">Yakin</button>
                </form>
                <button type="button" class="btn btn-link text-white ml-auto" data-dismiss="modal">Tidak</button>
            </div>

        </div>
    </div>
</div>
@endsection


@push('scripts')
<script src="{{ asset('js/layanan-surat_table.js') }}"></script>
@endpush