@extends('layouts.admin')

@section('title')
    {{ $title }}
@endsection

@section('container')
<main>
    <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
        <div class="container-fluid px-4">
            <div class="page-header-content">
                <div class="row align-items-center justify-content-between pt-3">
                    <div class="col-auto mb-3">
                        <h1 class="page-header-title">
                            <div class="page-header-icon"><i data-feather="file-text"></i></div>
                            PO Non Rutin
                        </h1>
                    </div>
                    <div class="col-12 col-xl-auto mb-3">
                        <a class="btn btn-sm btn-light text-primary" href="{{ route('po-non-routine.index') }}">
                            <i class="me-1" data-feather="arrow-left"></i>
                            Kembali Ke Semua Data
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Main page content-->
    <div class="container-fluid px-4">
        <div class="row gx-4">
            <div class="col-lg-8">
                <div class="card mb-4">
                    <div class="card-header">{{ $title }}</div>
                    <div class="card-body">
                        <table class="table table-striped table-sm">
                            <tbody>
                                <tr>
                                    <td width="250">Nama</td>
                                    <td>: {{ $item->user->name ?? '-' }}</td>
                                </tr>
                                <tr>
                                    <td>Wilayah</td>
                                    <td>: {{ $item->user->area ?? '-' }}</td>
                                </tr>
                                <tr>
                                    <td>Nama Pekerjaan</td>
                                    <td>: {{ $item->title }}</td>
                                </tr>
                                <tr>
                                    <td>Jumlah PO</td>
                                    <td>: @currency($item->price)</td>
                                </tr>
                                <tr>
                                    <td>Jumlah Borongan Team Lapangan</td>
                                    <td>: @currency($item->price_team)</td>
                                </tr>
                                <tr>
                                    <td>Nomor Rekening</td>
                                    <td>: {{ $item->account_number}}</td>
                                </tr>
                                <tr>
                                    <td>Nama Pemilik Rekening</td>
                                    <td>: {{ $item->account_name}}</td>
                                </tr>
                                <tr>
                                    <td>Nama Bank</td>
                                    <td>: {{ $item->bank_name}}</td>
                                </tr>
                                <tr>
                                    <td>File PO</td>
                                    <td>: <a href="{{ Storage::url($item->file) }}" class="btn btn-success btn-xs" target="_blank"><i class="fas fa-eye"></i>&nbsp;Lihat</a></td>
                                </tr>
                                <tr>
                                    <td>Status</td>
                                    <td>:
                                        @if ($item->status == 'Diterima')
                                            <div class="badge bg-green text-white">{{ $item->status}}</div>
                                        @elseif($item->status == 'Pending' || $item->status == 'Diproses')
                                            <div class="badge bg-yellow text-black">{{ $item->status}}</div>
                                        @elseif($item->status == 'Ditolak')
                                            <div class="badge bg-red text-white">{{ $item->status}}</div>
                                        @endif
                                    </td>
                                </tr>
                                @if ($item->status != 'Pending')
                                    <tr>
                                        <td>Catatan</td>
                                        <td>: {{ $item->notes}}</td>
                                    </tr>  
                                @endif
                                <tr>
                                    <td>Waktu Input</td>
                                    <td>: {{ date('d-m-Y H:i:s', strtotime($item->created_at)) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        @if ($item->status == 'Diterima')
        <div class="row gx-4">
            <div class="col-lg-8">
                <div class="card mb-4">
                    <div class="card-header">Panjar</div>
                    <div class="card-body">
                        @if (session()->has('success'))
                            <div class="alert alert-success alert-dismissible fade show hide-alert" role="alert">
                                {{ session('success') }}
                                <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif
                        <button class="btn btn-secondary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#addPanjar">Tambah Panjar</button>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered mt-3">
                                <thead>
                                    <th>No.</th>
                                    <th>Panjar</th>
                                    <th>Nominal</th>
                                    <th>Bukti Transfer</th>
                                    <th>Waktu Input</th>
                                    <th>Aksi</th>
                                </thead>
                                <tbody>
                                    @php
                                        $no=1;
                                    @endphp
                                    @forelse ($panjar as $row)
                                        <tr>
                                            <td>{{ $no++}}</td>
                                            <td>{{ $row->name }}</td>
                                            <td>@currency($row->amount)</td>
                                            <td>
                                                @if ($row->picture)
                                                    <a href="{{ Storage::url($row->picture) }}" target="_blank">
                                                        <img src="{{ Storage::url($row->picture) }}" class="img-fluid rounded mb-2" alt="Foto Bukti Transfer" style="height: 165px;">
                                                    </a>
                                                @else
                                                    tidak tersedia
                                                @endif
                                            </td>
                                            <td>{{ date('d-m-Y H:i:s', strtotime($item->created_at)) }}</td>
                                            <td>
                                                <div class="dropdown">
                                                    <button class="btn btn-primary btn-xs dropdown-toggle" id="dropdownMenuButton" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <i class="fas fa-user-cog"></i></button>
                                                    </button>
                                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                        <a href="{{ route('panjar.edit', $row->id) }}" class="dropdown-item">Edit</a>
                                                        <form action="{{ route('panjar.destroy', $row->id) }}" method="POST" onsubmit="return confirm('Apakah anda yakin ingin menghapus data panjar?');">
                                                            @method('delete')
                                                            @csrf
                                                            <button class="dropdown-item">
                                                                Hapus
                                                            </button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center">Data tidak tersedia</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>   
        @endif
    </div>
</main>
{{-- Modal Panjar --}}
<div class="modal fade" id="addPanjar" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tambah Panjar</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('panjar.store') }}" method="post" enctype="multipart/form-data" autocomplete="off">
                @csrf
                @method('POST')
                <input type="hidden" name="po_id" value="{{ $item->id }}">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="place_id">Nama Panjar</label>
                        <input class="form-control" name="name" type="text" value="{{ old('name') }}" placeholder="Masukan Nama Panjar.." required>
                        @error('name')
                            <div class="invalid-feedback">
                                {{ $message; }}
                            </div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="place_id">Nominal</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text">Rp.</div>
                            </div>
                            <input type="text" class="form-control" id="amount" name="amount" value="{{ old('amount') }}" placeholder="0000000" required>
                            @error('amount')
                                <div class="invalid-feedback">
                                    {{ $message; }}
                                </div>
                            @enderror
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="place_id">Bukti Transfer</label>
                        <input class="form-control" name="picture" id="picture" type="file" accept="image/*" required>
                        @error('picture')
                            <div class="invalid-feedback">
                                {{ $message; }}
                            </div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger" type="button" data-bs-dismiss="modal">Batal</button>
                    <button class="btn btn-primary" type="submit">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('addon-script')
  <script>
    let amount = document.getElementById('amount');
    
    amount.addEventListener('keyup', function(e){
        amount.value = formatRupiah(this.value);
    });

    function formatRupiah(angka, prefix){
        let number_string = angka.replace(/[^,\d]/g, '').toString(),
            split    = number_string.split(','),
            sisa     = split[0].length % 3,
            rupiah     = split[0].substr(0, sisa),
            ribuan     = split[0].substr(sisa).match(/\d{3}/gi);
            
        if (ribuan) {
            separator = sisa ? '.' : '';
            rupiah += separator + ribuan.join('.');
        }
        
        rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
        return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
    }
  </script>
@endpush