@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title ?? 'Stock Opname'])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="window.location='{{ route('trsso.index') }}'"><i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">

        <form action="{{ route('trsso.store') }}" method="POST" id="formStockOpname">
            @csrf

            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm">    
                        <div class="card-header pb-0 border-bottom">
                            <h6 class="mb-0 text-s">Buat Sesi Stock Opname Baru</h6>
                            <p class="text-xs text-muted mb-4">Isi form di bawah untuk memulai sesi stock opname baru.</p>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8 border-end-md">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label">Session ID</label>
                                            <input type="text" class="form-control bg-gray-100" value="{{ $session_id_preview }}" readonly>
                                            <p class="text-xs text-muted mb-0 mt-1">Otomatis di-generate sistem</p>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">PIC (Person In Charge) <span class="text-danger">*</span></label>
                                            <select name="pic_user_id" class="form-select" required>
                                                <option value="">Pilih PIC</option>
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->id }}" {{ old('pic_user_id') == $user->id ? 'selected' : '' }}>
                                                        {{ $user->firstname }} {{ $user->lastname }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        
                                        <div class="col-12"><hr class="horizontal dark mt-2 mb-2"></div>

                                        <div class="col-md-6">
                                            <label class="form-label">Periode Mulai <span class="text-danger">*</span></label>
                                            <input type="date" name="periode_start" class="form-control"
                                                value="{{ old('periode_start', date('Y-m-d')) }}" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label">Periode Selesai <span class="text-danger">*</span></label>
                                            <input type="date" name="periode_end" class="form-control"
                                                value="{{ old('periode_end', date('Y-m-d')) }}" required>
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label">Catatan (Optional)</label>
                                            <textarea name="remarks" class="form-control" rows="3"
                                                placeholder="Tambahkan catatan jika diperlukan...">{{ old('remarks') }}</textarea>
                                        </div>

                                        <div class="col-12 mt-4">
                                            <div class="d-flex justify-content-end gap-2">
                                                <a href="{{ route('trsso.index') }}" class="btn btn-outline-secondary mb-0">
                                                    Batal
                                                </a>
                                                <button type="submit" class="btn bg-primary mb-0">
                                                    <i class="fas fa-save me-2 text-white"></i><a class="text-white">Simpan</a>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 mt-4 mt-md-0">
                                    <div class="bg-gray-100 rounded-3 p-3 h-100">
                                        <h6 class="text-primary mb-3">
                                            <i class="fas fa-info-circle me-2"></i>Informasi Penting
                                        </h6>
                                        <ul class="text-sm text-muted ps-3 mb-0">
                                            <li class="mb-2">Saat sesi dibuat, sistem akan otomatis mengambil <strong>Snapshot</strong> stok saat ini.</li>
                                            <li class="mb-2">Snapshot merekam kondisi stok barang yang berstatus <strong>AVAILABLE</strong>.</li>
                                            <li class="mb-2">Hanya satu sesi <strong>OPEN/IN_PROGRESS</strong> yang diperbolehkan aktif.</li>
                                            <li>Sesi yang sudah berjalan tidak dapat dihapus, hanya bisa dibatalkan atau ditutup.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        @if($errors->any())
        Swal.fire({
            icon: 'error',
            title: 'Error',
            html: '{!! implode("<br>", $errors->all()) !!}',
            confirmButtonColor: '#028284'
        });
        @endif
        const periodeStart = document.querySelector('input[name="periode_start"]');
        const periodeEnd = document.querySelector('input[name="periode_end"]');

        periodeStart.addEventListener('change', function() {
            if (periodeEnd.value && periodeEnd.value < this.value) {
                periodeEnd.value = this.value;
            }
            periodeEnd.min = this.value;
        });
        if (periodeStart.value) {
            periodeEnd.min = periodeStart.value;
        }
    });
</script>
@endpush