@extends('layouts.app')

@section('content')

<div class="card">
    <div class="page-card">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-2">
            <h2 class="fw-bold mb-0 page-title">Daftar Produk</h2>
            <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#modalTambahProduk">
                + Tambah Produk
            </button>
        </div>

            {{-- ALERT ERROR --}}
            @if($errors->any())
                <div class="alert alert-danger">
                    {{ $errors->first() }}
                </div> 
            @endif

            {{-- ALERT success--}}
            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div> 
            @endif

            <!-- form tambah produk -->
                <!-- Modal Tambah Produk -->
                <div class="modal fade" id="modalTambahProduk" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
                        <div class="modal-content modern-modal">

                            <!-- Header -->
                            <div class="modal-header border-0 pb-0">

                                <div class="d-flex align-items-center gap-3">
                                    <div class="modal-icon">
                                        <i class="fas fa-box-open"></i>
                                    </div>

                                    <div>
                                        <h4 class="mb-1 fw-bold">Tambah Produk</h4>
                                        <small class="text-muted">
                                            Lengkapi informasi produk baru
                                        </small>
                                    </div>
                                </div>

                                <button type="button"
                                        class="btn-close custom-close"
                                        data-bs-dismiss="modal"></button>

                            </div>

                            <div class="modal-body">

                                <!-- Info -->
                                <div class="alert modern-alert">
                                    <i class="fas fa-info-circle me-2"></i>
                                    Pastikan semua data diisi dengan benar
                                </div>

                                <form action="{{ route('produk.store') }}"
                                    method="POST">

                                    @csrf

                                    <div class="row">

                                        <!-- Nama Produk -->
                                        <div class="col-md-6 mb-4">
                                            <label class="form-label fw-semibold">
                                                Nama Produk
                                            </label>

                                            <div class="input-group modern-product-input">
                                                <span class="input-group-text">
                                                    <i class="fas fa-tag"></i>
                                                </span>

                                                <input type="text"
                                                    name="nama_produk"
                                                    class="form-control"
                                                    placeholder="Masukkan nama produk"
                                                    required>
                                            </div>
                                        </div>

                                        <!-- Kategori -->
                                        <div class="col-md-6 mb-4">
                                            <label class="form-label fw-semibold">
                                                Kategori
                                            </label>

                                            <div class="input-group modern-product-input">

                                                <span class="input-group-text">
                                                    <i class="fas fa-th-large"></i>
                                                </span>

                                                <select name="kategori" class="form-select" required>

                                                    <option value="">Pilih kategori</option>

                                                    @foreach($kategoriList as $k)
                                                        <option value="{{ $k }}">
                                                            {{ $k }}
                                                        </option>
                                                    @endforeach

                                                </select>

                                            </div>
                                        </div>

                                        <!-- Harga -->
                                        <div class="col-md-6 mb-4">

                                            <label class="form-label fw-semibold">
                                                Harga
                                            </label>

                                            <div class="input-group modern-product-input">

                                                <span class="input-group-text">
                                                    Rp
                                                </span>

                                                <input type="number"
                                                    name="harga"
                                                    class="form-control"
                                                    placeholder="Masukkan harga"
                                                    required>

                                            </div>

                                            <small class="text-muted">
                                                Contoh: 5000
                                            </small>

                                        </div>

                                        <!-- Stok -->
                                        <div class="col-md-6 mb-4">

                                            <label class="form-label fw-semibold">
                                                Stok
                                            </label>

                                            <div class="input-group modern-product-input">

                                                <span class="input-group-text">
                                                    <i class="fas fa-cubes"></i>
                                                </span>

                                                <input type="number"
                                                    name="stok"
                                                    class="form-control"
                                                    placeholder="Masukkan stok"
                                                    required>

                                            </div>

                                            <small class="text-muted">
                                                Contoh: 10
                                            </small>

                                        </div>

                                        <!-- Expired -->
                                        <div class="col-12 mb-4">

                                            <label class="form-label fw-semibold">
                                                Masa Kedaluwarsa
                                            </label>

                                            <div class="input-group modern-product-input">

                                                <span class="input-group-text">
                                                    <i class="fas fa-calendar-alt"></i>
                                                </span>

                                                <input type="date"
                                                    name="expired_at"
                                                    class="form-control">

                                            </div>

                                            <small class="text-muted">
                                                Kosongkan jika tidak ada
                                            </small>

                                        </div>

                                        <!-- Footer -->
                                            <div class="d-flex gap-3 mt-4">

                                                <button type="button"
                                                        class="btn btn-cancel w-50"
                                                        data-bs-dismiss="modal">

                                                    <i class="fas fa-times me-2"></i>
                                                    Batal

                                                </button>

                                                <button type="submit"
                                                        class="btn btn-save w-50">

                                                    <i class="fas fa-save me-2"></i>
                                                    Simpan Produk

                                                </button>

                                            </div>

                                    </div>

                                </form>

                            </div>
                        </div>
                    </div>
                </div>

            <div class="card mt-2">
                <div class="card-body">

                    <form method="GET" action="/produk">

                        <div class="row mb-3">

                            <!-- Filter Kategori -->
                            <div class="col-md-4 mb-2">
                                <select name="kategori" class="form-control" onchange="this.form.submit()">
                                    <option value="">Semua Kategori</option>
                                    @foreach($kategoriList as $k)
                                        <option value="{{ $k }}" {{ request('kategori') == $k ? 'selected' : '' }}>
                                            {{ $k }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Search -->
                            <div class="col-md-4 mb-2">
                                <input 
                                    type="text" 
                                    name="search" 
                                    class="form-control" 
                                    placeholder="Cari produk..."
                                    value="{{ request('search') }}"
                                >
                            </div>

                            <!-- Button -->
                            <div class="col-md-4 mb-2 d-flex gap-2">
                                <button class="btn btn-primary">Cari</button>
                                <a href="/produk" class="btn btn-secondary">Reset</a>
                            </div>

                            {{-- CARD MOBILE --}}
                            <div class="d-md-none">

                                @foreach($produk as $key => $p)

                                <div class="product-card">

                                <div class="product-header">

                                    <div>
                                        <div class="product-no">
                                            {{ $key + 1 }}
                                        </div>

                                        <h5 class="product-name">
                                            {{ $p->nama_produk }}
                                        </h5>
                                    </div>

                                    <div class="product-status">
                                        @if($p->stok <= 0)
                                            <span class="stock-status danger">
                                                ● Stok Habis
                                            </span>

                                        @elseif($p->stok <= 12)
                                            <span class="stock-status warning">
                                                ● Stok Menipis
                                            </span>

                                        @else
                                            <span class="stock-status success">
                                                ● Tersedia
                                            </span>
                                        @endif
                                    </div>

                                </div>

                                    <div class="product-info">

                                        <div class="info-item">
                                            <i class="bi bi-cash-stack"></i>
                                            <small>Harga</small>
                                            <h6>Rp {{ number_format($p->harga,0,',','.') }}</h6>
                                        </div>

                                        <div class="info-item">
                                            <i class="bi bi-box-seam"></i>
                                            <small>Stok</small>
                                            <h6>{{ $p->stok }}</h6>
                                        </div>

                                        <div class="info-item">
                                            <i class="bi bi-calendar-event"></i>
                                            <small>Kedaluwarsa</small>
                                            <h6>
                                                @if($p->expired_at)
                                                    {{ date('d/m/Y', strtotime($p->expired_at)) }}
                                                @else
                                                    -
                                                @endif
                                            </h6>
                                        </div>

                                    </div>

                                    <div class="action-group">

                                        <a href="/produk/{{$p->id}}/edit" class="btn edit-btn">

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

                                        </a>

                                        <button type="button" onclick="confirmDelete({{$p->id}})" class="btn delete-btn">

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

                                        </button>

                                    </div>

                                </div>

                                @endforeach

                            </div>

                        </div>

                    </form>

                <div class="table-wrap">

                    <div class="table-responsive">

                        <table class="table table-bordered">

                            <thead class="table-light">

                                <tr>
                                    <th>No</th>
                                    <th>Nama Produk</th>
                                    <th>Kategori</th>
                                    <th>Harga</th>
                                    <th>Stok</th>
                                    <th>Kedaluwarsa</th>
                                    <th>Aksi</th>
                                </tr>

                            </thead>

                            <tbody>

                                @foreach($produk as $key => $p)

                                    <tr>

                                        <td data-label="No">{{$key+1}}</td>
                                        <td data-label="Nama Produk">{{$p->nama_produk}}</td>
                                        <td data-label="Kategori">{{$p->kategori}}</td>
                                        <td data-label="Harga">Rp {{number_format($p->harga)}}</td>
                                        <td data-label="Stok">{{$p->stok}}</td>

                                        <td data-label="Kedaluwarsa">
                                            @if($p->expired_at)
                                                {{ date('d/m/Y', strtotime($p->expired_at)) }}
                                            @else
                                            -
                                            @endif
                                        </td>

                                        <td data-label="Aksi">
                                            <a href="/produk/{{$p->id}}/edit" class="btn btn-warning btn-sm">
                                                <i class="bi bi-pencil-square"></i></a>
                                            <form id="delete-form-{{$p->id}}" action="/produk/{{$p->id}}" method="POST" style="display:inline">
                                                @csrf
                                                @method('DELETE')

                                                <button type="button" class="btn btn-danger btn-sm" onclick="confirmDelete({{$p->id}})">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </td>

                                    </tr>

                                @endforeach

                            </tbody>

                        </table>

                    </div>
                </div>

                    
                </div>

            </div>
        </div>


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

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    function confirmDelete(id){
        Swal.fire({
            title: 'Yakin hapus?',
            text: "Data tidak bisa dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#0d6efd',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if(result.isConfirmed){
                document.getElementById('delete-form-'+id).submit();
            }
        });

    }
</script>

<script>
    document.addEventListener("DOMContentLoaded", function(){
        @if(session('success'))
        Swal.fire({
            toast: true,
            position: 'top-end',
            icon: 'success',
            title: '{{ session('success') }}',
            showConfirmButton: false,
            timer: 3000
        });
        @endif
    });
</script>

@endsection