@extends('layouts.dashboard')
@section('title','Warehouse Order')
@section('page-title','Warehouse Order')
@section('content')
<div class="snyt-page" x-data="warehouseDemo()">
  <section class="snyt-hero">
    <div><h1>{{ $editing ? 'Edit '.$editing->reference : '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">LIVE · Focus-backed reservations</span>@if($editing)<a class="btn btn-sm btn-primary rounded-xl" href="{{ route('warehouse-operations.orders.show',$editing->id) }}">← Back to Order</a>@endif<a class="btn btn-sm btn-outline rounded-xl" href="{{ route('warehouse-operations.order-history') }}">All Warehouse Orders</a></div>
  </section>
  @if($errors->any())<div class="alert alert-error mb-4">{{ $errors->first() }}</div>@endif
  @if($sourceRequest)
  <div class="alert alert-info mb-4"><span>Approved salesman request <strong>{{ $sourceRequest->request_number }}</strong> · {{ $sourceReceiverName }}. Review matched products and select warehouse quantities before reserving. This does not create a Focus STI automatically.</span></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 · Add products to this order</h2>
      <p class="text-sm opacity-70 mb-2" x-show="!entryMode">Choose how to add products to your new order:</p>
      <div class="flex flex-wrap gap-2 mb-3">
        <button type="button" class="btn btn-sm" :class="entryMode==='bulk'?'btn-primary':'btn-outline'" @click="entryMode='bulk'">Bulk Entry</button>
        <button type="button" class="btn btn-sm" :class="entryMode==='single'?'btn-primary':'btn-outline'" @click="entryMode='single';$nextTick(()=>$refs.singleCode?.focus())">One by One · Scanner</button>
      </div>
      <div x-show="entryMode==='single'" class="rounded-xl border border-base-300 p-3 mb-3">
        <p class="text-sm opacity-70 mb-2">Scan barcode or enter SKU. Choose the product, enter quantity, then press Enter to add and scan the next one.</p>
        <form @submit.prevent="singleStage==='search'?lookupSingle():addSingle()" class="flex flex-wrap items-end gap-2">
          <label class="flex-1 min-w-[170px]"><span class="text-xs font-semibold">SKU / Barcode</span><input x-ref="singleCode" x-model.trim="singleCode" class="input input-bordered w-full font-mono" placeholder="TLS14LGRY" @input="singleStage='search';singleMatches=[]" autocomplete="off"></label>
          <button type="submit" class="btn btn-primary" :disabled="loadingSingle||!singleCode.trim()" x-text="loadingSingle?'Searching…':'Find Product'"></button>
        </form>
        <template x-if="singleMatches.length"><div class="mt-3 rounded-lg bg-base-200 p-3">
          <label class="block text-xs font-semibold mb-1">Matched item</label>
          <select class="select select-bordered w-full" x-model.number="singleProductId"><template x-for="p in singleMatches" :key="p.id"><option :value="p.id" x-text="p.sku+' · '+p.name+' · '+p.barcode"></option></template></select>
          <div class="flex flex-wrap gap-2 mt-2 items-end">
            <label><span class="text-xs font-semibold block">Requested Qty</span><input x-ref="singleQtyInput" type="number" min="1" max="100000" step="1" class="input input-bordered w-32" x-model.number="singleQty" @keydown.enter.prevent="addSingle()"></label>
            <button type="button" class="btn btn-success" @click="addSingle()">Add & Next ↵</button>
          </div>
          <p class="text-xs opacity-65 mt-2">Warehouse selection happens in the review table below. Nothing is reserved until Save.</p>
        </div></template>
      </div>
      <p x-show="entryMode === &quot;bulk&quot;" class="text-sm opacity-65 mb-3">Enter SKU, full barcode, or barcode suffix, with optional quantity. Examples: <code>TLS14LGRY</code>, <code>SKZS13Y-5</code>, <code>12997-3</code>.</p>
      <textarea x-show="entryMode === &quot;bulk&quot;" 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 x-show="entryMode === &quot;bulk&quot;" 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 · Salesman / Seller</h2>
      <p class="text-sm opacity-65 mb-3">Choose the salesman or seller who will receive this stock.</p>
      <select x-model="destinationId" @change="const option=$event.target.selectedOptions[0];if(option && option.value)receiverName=option.text.replace(/\s*· Showroom$/,'').trim()" class="select select-bordered w-full">
        <option value="">Select salesman / seller</option>
        @foreach($destinations as $destination)<option value="{{ $destination->id }}">{{ $destination->name }}{{ !empty($destination->is_showroom) ? ' · Showroom' : '' }}</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> Focus / Confirmed STR / Reserved / Available. Available = live Focus on hand − confirmed STR quantities since the last Focus report − active 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="if(confirm('Automatically select warehouses for all lines?'))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 warehouse 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…':(@json((bool)$editing)?'Save Changes · Same SERIES':'Reserve & Prepare STI →')"></button>
      </div>
    </div>
   </div>
  </template>
  <section class="mt-6"><x-ui.card>
    <h2 class="font-bold text-lg mb-3">Recent Warehouse Orders</h2>
    @if($recent->isEmpty())<p class="opacity-60 text-sm">No warehouse orders 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.orders.show',$order->id) }}">Open →</a></td></tr>@endforeach
      </tbody></table></div>
    @endif
  </x-ui.card></section>
</div>
<script>
function warehouseDemo(){
  return {
    message:@json($editing->original_message ?? $sourceMessage), receiverName:@json($editing->receiver_name ?? $sourceReceiverName), customerName:@json($editing->customer_name ?? ''), seriesNumber:@json($editing->series_number ?? $nextSeries), destinationId:@json((string)($editing->destination_id ?? $sourceDestinationId)),
    warehouses:@json($warehouses->map(fn($w)=>['code'=>$w->code,'name'=>$w->name])->values()),
    lines:[], error:'',loading:false,saving:false,
    entryMode:@json($editing ? 'bulk' : null),singleCode:'',singleQty:1,singleMatches:[],singleProductId:null,singleStage:'search',loadingSingle:false,
    async lookupSingle(){
      if(!this.singleCode.trim())return;
      this.loadingSingle=true;this.error='';
      try{
        const res=await fetch('{{ route('warehouse-operations.orders.match') }}',{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},body:JSON.stringify({message:this.singleCode.trim(),editing_order_id:@json($editing->id ?? null)})});
        const data=await res.json();if(!res.ok)throw Error(data.message||'Search failed');
        const line=data.lines?.[0];if(!line?.valid||!line.matches?.length)throw Error('No matching product found. Check the SKU or barcode.');
        this.singleMatches=line.matches;this.singleProductId=line.matches[0].id;this.singleStage='add';
        this.$nextTick(()=>{this.$refs.singleQtyInput?.focus();this.$refs.singleQtyInput?.select();});
      }catch(e){this.singleMatches=[];this.error=e.message;}finally{this.loadingSingle=false;}
    },
    async addSingle(){
      if(!this.singleMatches.length){await this.lookupSingle();return;}
      const qty=Number(this.singleQty);
      if(!Number.isInteger(qty)||qty<1||qty>100000){this.error='Enter a valid quantity.';return;}
      const chosen=this.singleMatches.find(p=>Number(p.id)===Number(this.singleProductId));
      if(!chosen){this.error='Select the correct product.';return;}
      const code=this.singleCode.trim();
      const entry=code+'-'+qty;
      const prior=this.lines.map(l=>({code:l.code,productId:l.productId,qty:l.qty,dip:l.dip,wiwudip:l.wiwudip,unavailable:l.unavailable,skip:l.skip,reviewed:l.reviewed}));
      this.message=this.message.trim()?this.message.trim()+'\n'+entry:entry;
      await this.match(prior);
      if(this.error)return;
      const last=this.lines[this.lines.length-1];
      if(last && last.code.toUpperCase()===code.toUpperCase()){last.productId=chosen.id;last.qty=qty;last.skip=false;if(['DIP','WIWUDIP'].every(c=>Number(chosen.stock?.[c]?.demo_available||0)===0))last.unavailable=qty;}
      this.singleCode='';this.singleQty=1;this.singleMatches=[];this.singleProductId=null;this.singleStage='search';
      this.$nextTick(() => this.$refs.singleCode?.focus());
    },
    init(){if(@json((bool)$editing)){this.match();return;}try{const saved=sessionStorage.getItem('snyt-warehouse-order-text');if(saved){this.message=saved;sessionStorage.removeItem('snyt-warehouse-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 salesman or seller.';
      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(prior=null){const retained=prior||this.lines.map(l=>({code:l.code,productId:l.productId,qty:l.qty,dip:l.dip,wiwudip:l.wiwudip,unavailable:l.unavailable,skip:l.skip,reviewed:l.reviewed}));this.loading=true;this.error='';this.lines=[];try{
      const res=await fetch('{{ route('warehouse-operations.orders.match') }}',{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},body:JSON.stringify({message:this.message,editing_order_id:@json($editing->id ?? null)})});
      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:(l.valid&&l.matches.length===1&&l.qty>0&&l.matches[0].stock&&['DIP','WIWUDIP'].every(code=>Number(l.matches[0].stock[code]?.demo_available||0)===0)?l.qty:0),skip:!l.valid||l.matches.length===0,reviewed:false,editProduct:false}));
      if(!@json((bool)$editing)){for(let i=0;i<Math.min(retained.length,this.lines.length);i++){
        const old=retained[i],l=this.lines[i];if(old.code!==l.code)continue;
        Object.assign(l,{productId:old.productId,qty:old.qty,dip:old.dip,wiwudip:old.wiwudip,unavailable:old.unavailable,skip:old.skip,reviewed:old.reviewed});
      }}
      const previous=@json($editing->items ?? []);
      if(@json((bool)$editing)){for(const l of this.lines){
        const old=previous[String(l.number)];
        if(old){l.productId=old.product_id;l.qty=old.qty;l.dip=old.dip;l.wiwudip=old.wiwudip;l.unavailable=old.unavailable;l.reviewed=old.reviewed;}
      }}
      // Manual warehouse allocation: never select a source automatically.
    }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(@json($editing ? route('warehouse-operations.orders.update',$editing->id) : route('warehouse-operations.orders.store')),{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},body:JSON.stringify({
        stock_request_id:@json($sourceRequest?->id),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