@extends('layouts.dashboard')
@section('title','Demo Warehouse Order')
@section('page-title','Demo Warehouse Order')
@section('content')
<div class="snyt-page" x-data="warehouseDemo()">
  <section class="snyt-hero">
    <div><h1>Prepare Warehouse Order</h1><p>Paste WhatsApp items → choose the exact product → allocate DIP / WIWU-DIP using live Focus quantities → reserve without changing real stock.</p></div>
    <div class="flex gap-2 items-center"><span class="badge badge-warning">SANDBOX · No real stock changes</span><a class="btn btn-sm btn-outline rounded-xl" href="{{ route('warehouse-operations.index') }}">← Warehouse Operations</a></div>
  </section>
  @if($errors->any())<div class="alert alert-error mb-4">{{ $errors->first() }}</div>@endif
  <section class="grid grid-cols-1 xl:grid-cols-3 gap-4 mb-5">
    <div class="xl:col-span-2"><x-ui.card>
      <h2 class="text-lg font-bold mb-1">01 · WhatsApp order</h2>
      <p class="text-sm opacity-65 mb-3">Accepted format: <code>11402-20</code> or <code>12798_5</code>; one per line. Quantities can be edited after matching.</p>
      <textarea class="textarea textarea-bordered w-full h-24 font-mono text-sm" x-model="message" placeholder="11402-20&#10;11372-10&#10;12798_5"></textarea>
      <div class="flex flex-wrap gap-2 mt-3">
        <button type="button" class="btn btn-primary rounded-xl" :disabled="loading || !message.trim()" @click="match()"><span x-text="loading?'Matching…':'Match & Allocate Products'"></span></button>
        <button type="button" class="btn btn-ghost rounded-xl" @click="message='';lines=[];error=''">Clear</button>
      </div>
    </x-ui.card></div>
    <div><x-ui.card>
      <h2 class="text-lg font-bold mb-1">02 · Receiver / Destination</h2>
      <p class="text-sm opacity-65 mb-3">Demo salesmen, shop, or other demo warehouses. No login is needed.</p>
      <select x-model="destinationId" class="select select-bordered w-full">
        <option value="">Select demo destination</option>
        @foreach($destinations as $destination)<option value="{{ $destination->id }}">{{ $destination->name }} ({{ ucfirst($destination->type) }})</option>@endforeach
      </select>
      <label class="block text-sm font-semibold mt-3 mb-1" for="warehouse-demo-receiver">Salesman / Receiver name <span class="text-error">*</span></label>
      <input id="warehouse-demo-receiver" x-model.trim="receiverName" maxlength="150" class="input input-bordered w-full" placeholder="e.g. RABEE or Salesman name" required>
      <p class="text-xs opacity-60 mt-1">Printed on the warehouse picking order and Excel export. Can be different from the destination stock account.</p>
      <label class="block text-sm font-semibold mt-3 mb-1" for="warehouse-demo-series">Paper series (editable)</label>
      <input id="warehouse-demo-series" x-model.trim="seriesNumber" maxlength="32" class="input input-bordered w-full font-mono" placeholder="W26-00001">
      <p class="text-xs opacity-60 mt-1">Printed as W26-00001-1, W26-00001-2 on the first row of each 15-item page. Separate from Focus STI/STR.</p>
      <label class="block text-sm font-semibold mt-3 mb-1" for="warehouse-demo-customer">Customer name (optional)</label>
      <input id="warehouse-demo-customer" x-model.trim="customerName" maxlength="150" class="input input-bordered w-full" placeholder="Customer / shop name given by receiver">
      <div class="mt-2 grid grid-cols-2 gap-2">
        @foreach($warehouses as $warehouse)<div class="rounded-xl border border-base-300 p-2">
          <div class="text-xs opacity-60">Source warehouse</div><div class="font-semibold text-sm">{{ $warehouse->name }}</div>
        </div>@endforeach
      </div>
    </x-ui.card></div>
  </section>
  <template x-if="error"><div class="alert alert-error rounded-xl mb-4" x-text="error"></div></template>
  <template x-if="lines.length">
   <div>
    <div class="flex flex-wrap items-center justify-between gap-3 mb-2">
      <div><h2 class="text-xl font-bold">03 · Review & Warehouse Allocation</h2><p class="text-sm opacity-65">See both warehouse quantities for every product, even when one warehouse has zero.</p></div>
      <div class="flex gap-2 items-center"><span class="badge badge-outline" x-text="activeLines.length + ' selected lines'"></span><span class="badge badge-primary" x-text="requestedTotal + ' pcs requested'"></span></div>
    </div>
    <div class="alert alert-info rounded-xl mb-2 py-2 text-xs"><span><strong>Stock display:</strong> On Hand / Reserved / Available. Available = live Focus on hand − demo STR quantities − active demo reservations. No real stock is deducted. Duplicate barcodes must be reviewed or explicitly merged.</span></div>
    <div class="flex flex-wrap gap-2 mb-2">
      <button type="button" class="btn btn-sm btn-primary rounded-xl" @click="autoAllocate()">Auto Allocate from Focus</button>
      <button type="button" class="btn btn-sm btn-outline rounded-xl" @click="mergeDuplicates()">Merge duplicate suffixes (reviewed)</button>
      <span class="text-xs opacity-60 self-center">Merging keeps one line and combines its quantity; you still choose the source warehouse.</span>
    </div>
    @include('warehouse-operations.partials.demo-minimal-table')
    <div class="rounded-2xl border border-primary bg-base-100 p-4 mt-5 sticky bottom-2 shadow-lg">
      <div class="flex flex-wrap items-center justify-between gap-3">
        <div><p class="font-bold">Ready to reserve demo stock?</p><p class="text-sm opacity-65" x-text="summaryText"></p><p class="text-xs text-warning" x-show="!canSave()" x-text="saveIssue()"></p></div>
        <button type="button" class="btn btn-primary rounded-xl" :disabled="saving || loading || !activeLines.length" @click="save()" x-text="saving?'Saving…':'Reserve & Prepare STI →'"></button>
      </div>
    </div>
   </div>
  </template>
  <section class="mt-6"><x-ui.card>
    <h2 class="font-bold text-lg mb-3">Recent Demo Orders</h2>
    @if($recent->isEmpty())<p class="opacity-60 text-sm">No demo requests yet.</p>@else
      <div class="overflow-x-auto"><table class="table table-sm"><thead><tr><th>Request</th><th>Receiver</th><th>Status</th><th>Date</th><th></th></tr></thead><tbody>
      @foreach($recent as $order)<tr><td class="font-mono">{{ $order->reference }}</td><td>{{ $order->destination_name }}</td><td>{{ ucfirst(str_replace('_',' ',$order->status)) }}</td><td>{{ $order->created_at }}</td><td><a class="btn btn-xs btn-primary" href="{{ route('warehouse-operations.demo.show',$order->id) }}">Open →</a></td></tr>@endforeach
      </tbody></table></div>
    @endif
  </x-ui.card></section>
</div>
<script>
function warehouseDemo(){
  return {
    message:'', receiverName:'', customerName:'', seriesNumber:@json($nextSeries), destinationId:'{{ $destinations->firstWhere('code','DEMO-VAN-01')->id ?? '' }}',
    warehouses:@json($warehouses->map(fn($w)=>['code'=>$w->code,'name'=>$w->name])->values()),
    lines:[], error:'',loading:false,saving:false,
    init(){try{const saved=sessionStorage.getItem('snyt-demo-order-text');if(saved){this.message=saved;sessionStorage.removeItem('snyt-demo-order-text');this.match();}}catch(e){}},
    get activeLines(){return this.lines.filter(l=>!l.skip)},
    get requestedTotal(){return this.activeLines.reduce((n,l)=>n+Number(l.qty||0),0)},
    get summaryText(){return this.activeLines.length+' lines · '+this.requestedTotal+' pieces · '+this.warehouses.filter(w=>this.activeLines.some(l=>Number(l[w.code==='DIP'?'dip':'wiwudip'])>0)).length+' source warehouse(s)';},
    selectedProduct(l){return l.matches.find(p=>Number(p.id)===Number(l.productId))||null},
    stock(l,code){return this.selectedProduct(l)?.stock?.[code]||{demo_on_hand:0,demo_reserved:0,demo_available:0,live_on_hand:0}},
    availability(l,code){return Number(this.stock(l,code).demo_available||0)},
    imageUrl(path){if(!path)return '';return path.startsWith('http')?path:'{{ url('/') }}/storage/'+path.replace(/^\/+|^storage\//g,'')},
    async copy(s){if(s)try{await navigator.clipboard.writeText(String(s))}catch(e){this.error='Clipboard unavailable: '+e.message}},
    fill(line,code){const field=code==='DIP'?'dip':'wiwudip',other=code==='DIP'?'wiwudip':'dip';line[field]=Math.max(0,Math.min(this.availability(line,code),Number(line.qty||0)-Number(line[other]||0)))},
    mergeDuplicates(){const first={};for(const l of this.lines){if(l.skip||!l.duplicate)continue;if(!first[l.code]){first[l.code]=l;l.reviewed=true;}else{first[l.code].qty+=Number(l.qty||0);first[l.code].dip=0;first[l.code].wiwudip=0;l.reviewed=true;l.skip=true;}} },
    saveIssue(){
      if(!this.destinationId)return 'Select a destination.';
      if(this.receiverName.trim().length<2)return 'Enter receiver name (at least 2 characters).';
      if(!/^W\d{2}-\d{5,}$/.test(this.seriesNumber.trim()))return 'Enter a valid paper series, e.g. W26-00001.';
      if(!this.activeLines.length)return 'No products selected.';
      const sums={};
      for(const l of this.activeLines){
        if(!l.valid||!this.selectedProduct(l))return 'Select the exact product on line '+l.number+'.';
        if(l.truncated_matches)return 'Too many barcode matches on line '+l.number+'.';
        if(l.duplicate&&!l.reviewed)return 'Review duplicate barcode on line '+l.number+'.';
        const qty=Number(l.qty),dip=Number(l.dip||0),wiwu=Number(l.wiwudip||0),unavailable=Number(l.unavailable||0);
        if(![qty,dip,wiwu,unavailable].every(Number.isInteger)||qty<1||dip<0||wiwu<0||unavailable<0)return 'Invalid quantity on line '+l.number+'.';
        if(dip+wiwu+unavailable!==qty)return 'Allocate all '+qty+' pieces on line '+l.number+' (remaining may be Not Available).';
        for(const [code,n] of [['DIP',dip],['WIWUDIP',wiwu]]){
          const key=code+':'+l.productId;
          sums[key]=(sums[key]||0)+n;
          if(sums[key]>this.availability(l,code))return 'Insufficient '+code+' availability on line '+l.number+'.';
        }
      }
      return '';
    },
    autoAllocate(){
      const used={};
      for(const l of this.activeLines){
        if(!this.selectedProduct(l))continue;
        const qty=Math.max(0,Number(l.qty||0));
        l.dip=0;l.wiwudip=0;l.unavailable=0;
        for(const [code,field] of [['DIP','dip'],['WIWUDIP','wiwudip']]){
          const key=code+':'+l.productId;
          const available=Math.max(0,this.availability(l,code)-(used[key]||0));
          const taken=Math.min(available,qty-Number(l.dip||0)-Number(l.wiwudip||0));
          l[field]=taken;used[key]=(used[key]||0)+taken;
        }
        l.unavailable=Math.max(0,qty-Number(l.dip||0)-Number(l.wiwudip||0));
      }
    },
    canSave(){
      if(!this.destinationId||this.receiverName.trim().length<2||!/^W\d{2}-\d{5,}$/.test(this.seriesNumber.trim())||this.activeLines.length===0)return false;
      const sums={};
      for(const l of this.activeLines){
        if(!l.valid||!this.selectedProduct(l)||l.truncated_matches || (l.duplicate&&!l.reviewed))return false;
        const qty=Number(l.qty),dip=Number(l.dip||0),wiwu=Number(l.wiwudip||0),unavailable=Number(l.unavailable||0);
        if(!Number.isInteger(qty)||qty<=0||!Number.isInteger(dip)||!Number.isInteger(wiwu)||dip<0||wiwu<0||!Number.isInteger(unavailable)||unavailable<0||dip+wiwu+unavailable!==qty)return false;
        for(const [code,n] of [['DIP',dip],['WIWUDIP',wiwu]]){
          const key=code+':'+l.productId;
          if(n>this.availability(l,code))return false;
          sums[key]=(sums[key]||0)+n;
          if(sums[key]>this.availability(l,code))return false;
        }
      }
      return true;
    },
    async match(){this.loading=true;this.error='';this.lines=[];try{
      const res=await fetch('{{ route('warehouse-operations.demo.match') }}',{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},body:JSON.stringify({message:this.message})});
      const data=await res.json();if(!res.ok)throw Error(data.message||JSON.stringify(data.errors)||'Matching failed');
      this.lines=data.lines.map(l=>({...l,productId:l.matches.length===1?l.matches[0].id:'',qty:l.qty,dip:0,wiwudip:0,unavailable:0,skip:!l.valid||l.matches.length===0,reviewed:false,editProduct:false}));
      this.autoAllocate();
    }catch(e){this.error=e.message;}finally{this.loading=false;}},
    async save(){if(!this.canSave()){this.error=this.saveIssue();return;}this.saving=true;this.error='';try{
      const res=await fetch('{{ route('warehouse-operations.demo.store') }}',{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},body:JSON.stringify({
        destination_id:Number(this.destinationId),series_number:this.seriesNumber.trim(),receiver_name:this.receiverName.trim(),customer_name:this.customerName.trim(),message:this.message,
        lines:this.activeLines.map(l=>({number:l.number,code:l.code,product_id:Number(l.productId),qty:Number(l.qty),dip:Number(l.dip||0),wiwudip:Number(l.wiwudip||0),unavailable:Number(l.unavailable||0),duplicate_reviewed:!!l.reviewed}))
      })});const data=await res.json();
      if(!res.ok)throw Error(data.message||JSON.stringify(data.errors)||'Failed to reserve');
      window.location.assign(data.url);
    }catch(e){this.error=e.message;window.scrollTo({top:0,behavior:'smooth'});}finally{this.saving=false;}}
  };
}
</script>
@endsection