@extends('layouts.app')

@section('content')

<div class="stock-header">

    <div>
        <h1>Laporan Stok</h1>
        <p>Kelola dan pantau stok masuk & keluar</p>
    </div>

    <div class="stock-illustration">
        <i class="bi bi-clipboard-data"></i>
    </div>

</div>

<div class="card dashboard-card">

    <div class="card-body">

        <!-- TAB -->

        <ul class="nav nav-pills stok-tabs mb-4" role="tablist">

            <li class="nav-item w-50">
                <button class="nav-link active w-100"
                        data-bs-toggle="pill"
                        data-bs-target="#stokMasuk">

                    <i class="bi bi-box-arrow-in-down"></i>
                    Stok Masuk

                </button>
            </li>

            <li class="nav-item w-50">
                <button class="nav-link w-100"
                        data-bs-toggle="pill"
                        data-bs-target="#stokKeluar">

                    <i class="bi bi-box-arrow-up"></i>
                    Stok Keluar

                </button>
            </li>

        </ul>

        <div class="tab-content">

            <!-- STOK MASUK -->

            <div class="tab-pane fade show active" id="stokMasuk">

                <div class="mb-3">
                    <input type="text"
                        id="searchMasuk"
                        class="form-control"
                        placeholder="Cari produk stok masuk...">
                </div>

                <div class="d-none d-md-block">

                    <table class="table table-bordered" id="tableMasuk">

                        <tr>
                            <th>Produk</th>
                            <th>Jumlah</th>
                            <th>Tanggal</th>
                            <th>Expired</th>

                            @if(session('role')=='admin')
                            <th>Aksi</th>
                            @endif
                        </tr>

                        @foreach($masuk as $m)

                        <tr>

                            <td>{{ $m->produk->nama_produk }}</td>

                            <td>{{ $m->jumlah }}</td>

                            <td>
                                {{ date('d/m/Y', strtotime($m->tanggal)) }}
                            </td>

                            <td>
                                {{ $m->expired_at
                                ? date('d/m/Y',strtotime($m->expired_at))
                                : '-' }}
                            </td>

                            @if(session('role')=='admin')
                            <td>

                                <form id="delete-masuk-{{$m->id}}"
                                      action="/stok-masuk/{{$m->id}}"
                                      method="POST">

                                    @csrf
                                    @method('DELETE')

                                    <button type="button"
                                            class="btn btn-danger btn-sm"
                                            onclick="confirmDeleteMasuk({{$m->id}})">

                                        <i class="bi bi-trash"></i>

                                    </button>

                                </form>

                            </td>
                            @endif

                        </tr>

                        @endforeach

                    </table>

                </div>


                <!-- MOBILE -->

                <div class="d-block d-md-none">

                    @foreach($masuk as $m)

                    <div class="stock-mobile-card masuk-item">

                        <div class="stock-mobile-title">

                            <div class="stock-mobile-icon">
                                <i class="bi bi-box-arrow-in-down"></i>
                            </div>

                            <div class="title-text">
                                <h5>Stok Masuk</h5>
                                <small>Riwayat produk masuk</small>
                            </div>

                        </div>

                        <div class="mobile-item">
                            <span class="label">Produk</span>
                            <span>{{ $m->produk->nama_produk }}</span>
                        </div>

                        <div class="mobile-item">
                            <span class="label">Jumlah</span>
                            <span>{{ $m->jumlah }}</span>
                        </div>

                        <div class="mobile-item">
                            <span class="label">Tanggal</span>
                            <span>{{ date('d/m/Y', strtotime($m->tanggal)) }}</span>
                        </div>

                        <div class="mobile-item">
                            <span class="label">Expired</span>

                            <span>
                                {{ $m->expired_at
                                ? date('d/m/Y',strtotime($m->expired_at))
                                : '-' }}
                            </span>
                        </div>

                        @if(session('role') == 'admin')
                            <form id="delete-masuk-mobile-{{$m->id}}"
                                action="{{ route('stokmasuk.destroy', $m->id) }}"
                                method="POST"
                                class="mt-3">

                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        class="btn btn-danger w-100 btn-delete-mobile"
                                        onclick="return confirm('Yakin ingin menghapus data ini?')">

                                    <i class="fas fa-trash me-2"></i>
                                    Hapus Data

                                </button>

                            </form>
                        @endif

                    </div>

                    @endforeach

                </div>

            </div>

            <!-- STOK KELUAR -->

            <div class="tab-pane fade" id="stokKeluar">

                <div class="mb-3">
                    <input type="text"
                        id="searchKeluar"
                        class="form-control"
                        placeholder="Cari produk stok keluar...">
                </div>

                <div class="d-none d-md-block">

                    <table class="table table-bordered" id="tableKeluar">

                        <tr>
                            <th>Produk</th>
                            <th>Jumlah</th>
                            <th>Tanggal</th>

                            @if(session('role')=='admin')
                            <th>Aksi</th>
                            @endif
                        </tr>

                        @foreach($keluar as $k)

                        <tr>

                            <td>{{ $k->produk->nama_produk }}</td>

                            <td>{{ $k->jumlah }}</td>

                            <td>{{ date('d/m/Y', strtotime($k->tanggal)) }}</td>

                            @if(session('role')=='admin')
                                <td>

                                    <form id="delete-keluar-{{$k->id}}"
                                        action="{{ route('stokkeluar.destroy', $k->id) }}"
                                        method="POST">

                                        @csrf
                                        @method('DELETE')

                                        <button type="button"
                                                class="btn btn-danger btn-sm"
                                                onclick="confirmDeleteKeluar({{$k->id}})">

                                            <i class="bi bi-trash"></i>

                                        </button>

                                    </form>

                                </td>
                                @endif

                        </tr>

                        @endforeach

                    </table>

                </div>


                <!-- MOBILE -->

                <div class="d-block d-md-none">

                    @foreach($keluar as $k)

                    <div class="stock-mobile-card keluar-item">

                        <div class="stock-mobile-title">

                            <div class="stock-mobile-icon keluar-icon">
                                <i class="bi bi-box-arrow-up"></i>
                            </div>

                            <div class="title-text">
                                <h5>Stok Keluar</h5>
                                <small>Riwayat produk keluar</small>
                            </div>

                        </div>

                        <div class="mobile-item">
                            <span class="label">Produk</span>
                            <span>{{ $k->produk->nama_produk }}</span>
                        </div>

                        <div class="mobile-item">
                            <span class="label">Jumlah</span>
                            <span>{{ $k->jumlah }}</span>
                        </div>

                        <div class="mobile-item">
                            <span class="label">Tanggal</span>
                            <span>{{ date('d/m/Y', strtotime($k->tanggal)) }}</span>
                        </div>

                        @if(session('role') == 'admin')

                        <form id="delete-keluar-mobile-{{$k->id}}"
                            action="{{ route('stokkeluar.destroy', $k->id) }}"
                            method="POST"
                            class="mt-3">

                            @csrf
                            @method('DELETE')

                            <button type="button"
                                    class="btn btn-danger w-100 btn-delete-mobile"
                                    onclick="confirmDeleteKeluarMobile({{$k->id}})">

                                <i class="bi bi-trash me-2"></i>
                                Hapus Data

                            </button>

                        </form>

                        @endif

                    </div>

                    @endforeach

                </div>

            </div>

        </div>

    </div>

</div>


{{---- alert ----}}

<script>

    function confirmDeleteMasuk(id){
        Swal.fire({
            title : 'Yakin hapus?',
            text : 'Data stok masuk akan dihapus!',
            icon : 'warning',
            showCancelButton : true,
            confirmButtonText : 'Ya, Hapus!',
            cancelButtonText : 'Batal'
        }).then((result)=> {
            if(result.isConfirmed){
                document.getElementById('delete-masuk-'+id).submit();
            }
        });
    }

    function confirmDeleteKeluar(id){
        Swal.fire({
            title : 'Yakin hapus?',
            text : 'Data stok keluar akan dihapus!',
            icon : 'warning',
            showCancelButton : true,
            confirmButtonText : 'Ya, Hapus!',
            cancelButtonText : 'Batal'
        }).then((result)=> {
            if(result.isConfirmed){
                document.getElementById('delete-keluar-'+id).submit();
            }
        });
    }

    // SEARCH STOK MASUK

    document.getElementById('searchMasuk')
    .addEventListener('keyup', function(){

        let value = this.value.toLowerCase();

        document.querySelectorAll('#tableMasuk tr')
        .forEach(function(row, index){

            if(index === 0) return;

            row.style.display =
                row.innerText.toLowerCase().includes(value)
                ? ''
                : 'none';
        });

        document.querySelectorAll('.masuk-item')
        .forEach(function(card){

            card.style.display =
                card.innerText.toLowerCase().includes(value)
                ? ''
                : 'none';
        });

    });


    // SEARCH STOK KELUAR

    document.getElementById('searchKeluar')
    .addEventListener('keyup', function(){

        let value = this.value.toLowerCase();

        document.querySelectorAll('#tableKeluar tr')
        .forEach(function(row, index){

            if(index === 0) return;

            row.style.display =
                row.innerText.toLowerCase().includes(value)
                ? ''
                : 'none';
        });

        document.querySelectorAll('.keluar-item')
        .forEach(function(card){

            card.style.display =
                card.innerText.toLowerCase().includes(value)
                ? ''
                : 'none';
        });

    });

    function confirmDeleteMasukMobile(id){
        Swal.fire({
            title : 'Yakin hapus?',
            text : 'Data stok masuk akan dihapus!',
            icon : 'warning',
            showCancelButton : true,
            confirmButtonText : 'Ya, Hapus!',
            cancelButtonText : 'Batal'
        }).then((result)=> {
            if(result.isConfirmed){
                document.getElementById('delete-masuk-mobile-'+id).submit();
            }
        });
    }

    function confirmDeleteKeluarMobile(id){
        Swal.fire({
            title : 'Yakin hapus?',
            text : 'Data stok keluar akan dihapus!',
            icon : 'warning',
            showCancelButton : true,
            confirmButtonText : 'Ya, Hapus!',
            cancelButtonText : 'Batal'
        }).then((result)=> {
            if(result.isConfirmed){
                document.getElementById('delete-keluar-mobile-'+id).submit();
            }
        });
    }

</script>

@endsection