@extends('layouts.master')

@section('title', 'Buat Stok Opname')

@section('styles')
<link rel="stylesheet" href="{{ asset('build/assets/libs/flatpickr/flatpickr.min.css') }}">
@endsection

@section('content')
<div class="container-fluid">
    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <p class="fw-semibold fs-18 mb-0">Buat Stok Opname</p>
            <span class="fs-13 text-muted">Gudang &rarr; Stok Opname &rarr; Baru</span>
        </div>
        <a href="{{ route('gudang.stok-opname.index') }}" class="btn btn-secondary btn-sm mt-2 mt-md-0">
            <i class="bx bx-arrow-back me-1"></i> Kembali
        </a>
    </div>

    <div class="card custom-card" style="max-width:560px">
        <div class="card-header"><div class="card-title mb-0">Informasi Opname</div></div>
        <div class="card-body">
            <div class="mb-3">
                <label class="form-label">Nomor Opname</label>
                <input type="text" class="form-control form-control-sm" value="{{ $nomor }}" readonly>
            </div>
            <div class="mb-3">
                <label class="form-label">Gudang <span class="text-danger">*</span></label>
                <select id="gudangId" class="form-select form-select-sm">
                    <option value="">— Pilih Gudang —</option>
                    @foreach($gudangList as $g)
                    <option value="{{ $g->id }}">{{ $g->nama }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">Tanggal Opname <span class="text-danger">*</span></label>
                <input type="text" id="tanggalOpname" class="form-control form-control-sm flatpickr"
                       placeholder="dd-mm-yyyy" value="{{ now()->format('d-m-Y') }}" autocomplete="off">
            </div>
            <div class="mb-4">
                <label class="form-label">Catatan</label>
                <textarea id="catatan" class="form-control form-control-sm" rows="2"></textarea>
            </div>
            <button type="button" class="btn btn-primary btn-sm px-3" id="btnStore" onclick="doStore()">
                <i class="bx bx-save me-1"></i> Mulai Opname
            </button>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('build/assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script>
flatpickr('#tanggalOpname', { dateFormat: 'd-m-Y', locale: 'id' });

function dmy2iso(val) {
    if (!val) return '';
    const p = val.split('-');
    return p[2] + '-' + p[1] + '-' + p[0];
}

function doStore() {
    const gudangId = document.getElementById('gudangId').value;
    const tanggal  = document.getElementById('tanggalOpname').value;

    if (!gudangId) { alert('Pilih gudang terlebih dahulu.'); return; }
    if (!tanggal)  { alert('Isi tanggal opname.'); return; }

    const btn = document.getElementById('btnStore');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Menyimpan...';

    fetch('{{ route('gudang.stok-opname.store') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        body: JSON.stringify({
            gudang_id:      gudangId,
            tanggal_opname: dmy2iso(tanggal),
            catatan:        document.getElementById('catatan').value,
        }),
    })
    .then(function(r) { return r.json().then(function(d) { return { ok: r.ok, data: d }; }); })
    .then(function(res) {
        if (res.data.redirect) {
            window.location.href = res.data.redirect;
        } else {
            alert(res.data.message || 'Gagal membuat opname.');
            btn.disabled = false;
            btn.innerHTML = '<i class="bx bx-save me-1"></i> Mulai Opname';
        }
    })
    .catch(function() {
        alert('Koneksi gagal. Coba lagi.');
        btn.disabled = false;
        btn.innerHTML = '<i class="bx bx-save me-1"></i> Mulai Opname';
    });
}
</script>
@endsection