@extends('admin.layouts.app')

@section('title', 'Produk')

@push('style')
    <!-- CSS Libraries -->
    <link rel="stylesheet" href="{{ asset('admin/library/izitoast/dist/css/iziToast.min.css') }}">
    <link rel="stylesheet" href="{{ asset('library/summernote/dist/summernote-bs4.css') }}">
    <link rel="stylesheet" href="{{ asset('admin/library/chocolat/dist/css/chocolat.css') }}">
    <style>
        .gallery .gallery-item {
            width: 130px !important;
            height: 130px !important;
        }

        .gallery .gallery-more div {
            line-height: 130px !important;
        }

        .gallery .gallery-more:after {
            background-color: rgb(0 0 0 / 30%) !important;
        }

        table.desc {
            width: 95%;
        }

        table.desc td {
            padding: 4px 0px;
        }

        table.desc .left-side {
            width: 10%;
            vertical-align: top;
        }

        table.desc .center-side {
            width: 3%;
            vertical-align: top;
        }

        table.desc .right-side {
            width: 72%;
            vertical-align: center;
        }

        table.desc p,
        table.desc h6 {
            margin: 0px;
        }
    </style>
@endpush

@section('main')

    {{-- Delete Modal --}}
    <div class="modal fade" id="deletebutton" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="/ubahstatus/{{ $data->id }}" method="POST" class="d-inline" id="formHapus" enctype="multipart/form-data">
                @csrf
                @method('put')
                    <div class="modal-header">
                        <h5 class="modal-title">Peringatan Pesanan {{ $data->kode_keluar }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Ubah Status</label>
                            <select class="form-control @error('jenis_kopi') is-invalid @enderror"
                                name="status_transaksi">
                                @if ($data->status_transaksi != 'selesai')
                                    <option value="selesai">Selesai</option>
                                @endif
                                <option value="selesai sudah diambil">Selesai Diambil</option>
                            </select>
                            @error('jenis_kopi')
                                <div class="invalid-feedback">
                                    Silahkan pilh status dengan benar
                                </div>
                            @enderror
                        </div>
                        @if ($data->status_pembayaran == "belum lunas")
                            <div class="form-group">
                                <label>Bukti Pelunasan</label>
                                <input type="file" name="gambarpelunasan" class="form-control @error('gambarpelunasan') is-invalid @enderror" id="gambar" onchange="imagePrev(this, '#tgambar');"  autocomplete="off" style="border: none!important">
                                @error('gambarpelunasan')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div id="preview">
                                    <img class="mt-3" width="100%" src="{{ asset('admin/img/noimage.png') }}" id="tgambar">
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                            <button type="submit" class="btn btn-danger" id="deletebtn">Ubah Status</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- Akhir modal --}}
    <div class="main-content">
        <section class="section">
            <div class="section-header">
                <h1>Detail Barang Keluar</h1>
                <div class="section-header-breadcrumb">
                    <a href="{{ url('/barangkeluar') }}" class="btn btn-warning mr-2">Kembali</a>
                    @if ($data->status_transaksi != 'selesai sudah diambil')
                        <button class="btn btn-primary" type="button" class="btn btn-danger hapus"
                        data-toggle="modal" data-target="#deletebutton"
                        data-id="{{ $data->id }}">
                            Ubah Status
                        </button>
                    @endif
                </div>
            </div>

            <div class="section-body">

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            {{-- <div class="card-header">
                                <h4>Detail</h4>
                            </div> --}}
                            <div class="card-body">
                                <table class="desc">
                                    <tr>
                                        <td class="left-side">
                                            <h6>Kode Keluar</h6>
                                        </td>
                                        <td class="center-side">
                                            <h6>:</h6>
                                        </td>
                                        <td class="right-side">
                                            <p>{{ $data->kode_keluar }}</p>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td class="left-side">
                                            <h6>Nama Customer </h6>
                                        </td>
                                        <td class="center-side">
                                            <h6>:</h6>
                                        </td>
                                        <td class="right-side">
                                            <p>{{ $data->nama_customer }}</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="left-side">
                                            <h6>Nama Kopi</h6>
                                        </td>
                                        <td class="center-side">
                                            <h6>:</h6>
                                        </td>
                                        <td class="right-side">
                                            <p>{{ $data->nama_kopi }}</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="left-side">
                                            <h6>Jenis Kopi</h6>
                                        </td>
                                        <td class="center-side">
                                            <h6>:</h6>
                                        </td>
                                        <td class="right-side">
                                            <p>{{ $data->jenis_kopi }}</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="left-side">
                                            <h6>Harga Kopi</h6>
                                        </td>
                                        <td class="center-side">
                                            <h6>:</h6>
                                        </td>
                                        <td class="right-side">
                                            <p>@currency($data->harga_kopi)</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="left-side">
                                            <h6>Jumlah</h6>
                                        </td>
                                        <td class="center-side">
                                            <h6>:</h6>
                                        </td>
                                        <td class="right-side">
                                            <p>{{ $data->jumlah }}Kg</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="left-side">
                                            <h6>Total Harga</h6>
                                        </td>
                                        <td class="center-side">
                                            <h6>:</h6>
                                        </td>
                                        <td class="right-side">
                                            <p>@currency($data->total_harga)</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="left-side">
                                            <h6>DP</h6>
                                        </td>
                                        <td class="center-side">
                                            <h6>:</h6>
                                        </td>
                                        <td class="right-side">
                                            <p>@currency($data->dp)</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="left-side">
                                            <h6>Sisa Bayar</h6>
                                        </td>
                                        <td class="center-side">
                                            <h6>:</h6>
                                        </td>
                                        <td class="right-side">
                                            <p>@currency($data->sisa_bayar)</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="left-side">
                                            <h6>Status Pembayaran</h6>
                                        </td>
                                        <td class="center-side">
                                            <h6>:</h6>
                                        </td>
                                        <td class="right-side">
                                            <p>{{ $data->status_pembayaran }}</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="left-side">
                                            <h6>Status Transaksi</h6>
                                        </td>
                                        <td class="center-side">
                                            <h6>:</h6>
                                        </td>
                                        <td class="right-side">
                                            <p>{{ $data->status_transaksi }}</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="left-side">
                                            <h6>Tanggal Transaksi</h6>
                                        </td>
                                        <td class="center-side">
                                            <h6>:</h6>
                                        </td>
                                        <td class="right-side">
                                            <p>{{ $data->tanggal_transaksi }}</p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="left-side">
                                            <h6>Tanggal Selesai</h6>
                                        </td>
                                        <td class="center-side">
                                            <h6>:</h6>
                                        </td>
                                        <td class="right-side">
                                            <p>{{ $data->tanggal_selesai }}</p>
                                        </td>

                                    </tr>

                                </table>
                                <div class="row">
                                    @if ($data->gambardp)
                                        <div class="gallery mt-2 col-md-3">
                                            <div class="gallery-item gallery-more"
                                                data-image="{{ asset('storage/' . $data->gambardp) }}" data-title="gambarbuktipembayaran">
                                                <div>Bukti DP</div>
                                            </div>
                                        </div>
                                    @endif

                                    @if ($data->gambarpelunasan)
                                        <div class="gallery mt-2 col-md-3">
                                            <div class="gallery-item gallery-more"
                                                data-image="{{ asset('storage/' . $data->gambarpelunasan) }}" data-title="gambarbuktipembayaran">
                                                <div>Bukti Lunas</div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{-- <form action="/admin/produk/{{ $data->id }}/restok" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="modal fade" tabindex="-1" role="dialog" id="exampleModal">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Tambah Stok {{ $data->nama_produk }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <input type="number" class="form-control" name="stok" autocomplete="off" required autofocus>
                        </div>
                        <div class="modal-footer bg-whitesmoke br">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                            <button type="submit" class="btn btn-primary">Simpan</button>
                        </div>
                    </div>
                </div>
            </div>
        </form> --}}
    </div>
@endsection

@push('scripts')
    <!-- JS Libraies -->
    <script src="{{ asset('admin/library/chocolat/dist/js/jquery.chocolat.min.js') }}"></script>

    <!-- Page Specific JS File -->
    <script src="{{ asset('admin/js/page/bootstrap-modal.js') }}"></script>
    <script src="{{ asset('admin/library/izitoast/dist/js/iziToast.min.js') }}"></script>
    <script src="{{ asset('admin/js/page/modules-toastr.js') }}"></script>
    <script>
        function imagePrev(imageUploadKTP, tumb) {
            if (imageUploadKTP.files && imageUploadKTP.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $(tumb).attr('src', e.target.result);
                };

                reader.readAsDataURL(imageUploadKTP.files[0]);
            }
        }
    </script>
@endpush