@php
  /** @var \TCG\Voyager\Models\DataType $dataType */
  /** @var \Illuminate\Database\Eloquent\Model $dataTypeContent */
  $edit = !is_null($dataTypeContent->getKey());
  $add  = is_null($dataTypeContent->getKey());

  // Convenience accessors (match your column names)
  $row  = $dataTypeContent;
  // Pre-computed helpers you used before:
  $fundsPaidOptions = fundsPaid(); // returns [key => label]
  $selectedFundsPaid = $row->funds_paid ? explode(',', $row->funds_paid) : [];
  $showProductType = in_array('3', $selectedFundsPaid) || count($selectedFundsPaid) > 1;
  $showPartial     = in_array('3', $selectedFundsPaid);
@endphp

@extends('voyager::master')

@section('css')
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css">
  <style>
    .panel-body .form-group label{font-weight:600}
    .blurred-text{filter: blur(6px)}
    .image-grid{display:flex;gap:.5rem;flex-wrap:wrap}
    .image-grid img{width:70px;height:70px;object-fit:cover;border:1px solid #eee;border-radius:4px}
  </style>
@stop

@section('page_title', __('voyager::generic.'.($edit ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('page_header')
  <h1 class="page-title">
    <i class="{{ $dataType->icon }}"></i>
    {{ __('voyager::generic.'.($edit ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular') }}
  </h1>
  @include('voyager::multilingual.language-selector')
@stop

@section('content')
<div class="page-content edit-add container-fluid">
  <div class="row">
    <div class="col-md-12">

      <div class="panel panel-bordered">
        <form role="form" class="form-edit-add"
              action="{{ $edit ? route('voyager.'.$dataType->slug.'.update', $row->getKey()) : route('voyager.'.$dataType->slug.'.store') }}"
              method="POST" enctype="multipart/form-data">
          @if($edit) {{ method_field("PUT") }} @endif
          {{ csrf_field() }}

          <div class="panel-body">

            @if ($errors->any())
              <div class="alert alert-danger">
                <ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
              </div>
            @endif

            {{-- Top meta --}}
            <div class="row">
              <div class="form-group col-md-6">
                <label>Date (submitted)</label>
                <input type="text" class="form-control" value="{{ $row->date ? \Carbon\Carbon::createFromTimestamp($row->date)->format('d/m/Y, g:i A') : '' }}" readonly>
              </div>
              <div class="form-group col-md-6">
                <label>Priority {{$row->priority}}</label>
                <select class="form-control" name="priority" id="priority">
                  <option value="0">Select Option</option>
                  <option value="1" >Priority</option>
                </select>
              </div>

              <div class="form-group col-md-6">
                <label>Email</label>
                <input type="text" name="email" class="form-control" value="{{ $row->email }}" readonly>
              </div>
              <div class="form-group col-md-3">
                <label>First Name</label>
                <input type="text" name="first_name" class="form-control" value="{{ $row->first_name }}" readonly>
              </div>
              <div class="form-group col-md-3">
                <label>Last Name</label>
                <input type="text" name="last_name" class="form-control" value="{{ $row->last_name }}" readonly>
              </div>
            </div>

            {{-- Funds agreed with inline edit (admin) --}}
            <div class="row">
              <div class="form-group col-md-6">
                <label>Funds Agreed For Sale</label>
                <div class="input-group">
                  <input type="text" class="form-control" id="fund_agreed" name="fund_agreed"
                         value="{{ $row->fund_agreed }}" readonly required>
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button" id="editFund"><i class="voyager-edit"></i></button>
                  </span>
                </div>
                <small id="amount-exceeded-error" class="text-danger"></small>
              </div>
              <div class="form-group col-md-6">
                <label>Funds Paid On</label>
                @php
                  $paidOn = $row->paid_on ? \Carbon\Carbon::createFromTimestamp($row->paid_on)->format('Y-m-d') : '';
                @endphp
                <input type="date" class="form-control" id="paid_on" name="paid_on" value="{{ $paidOn }}">
              </div>
            </div>

            {{-- Bank details (readonly) --}}
            <div class="row">
              <div class="form-group col-md-4">
                <label>Your name as on bank</label>
                <input type="text" class="form-control" value="{{ $row->bank_account_name }}" readonly>
              </div>
              <div class="form-group col-md-4">
                <label>Bank Name</label>
                <input type="text" class="form-control" value="{{ $row->bank_name }}" readonly>
              </div>
              <div class="form-group col-md-4">
                <label>Account Number & Sort Code</label>
                <input type="text" class="form-control" value="{{ $row->bank_account_number }}" readonly>
              </div>
            </div>

            {{-- Upload ID images (file/camera selector UI hooks) --}}
            <div class="row">
              <div class="form-group col-md-12">
                <label>Upload Photo ID</label>
                <div class="radio">
                  <label><input type="radio" name="inputOption" value="file" checked> System File</label>
                  <label class="ml-3"><input type="radio" name="inputOption" value="camera"> Camera</label>
                </div>

                <div id="fileInputContainer">
                  <input type="file" class="form-control" name="compulsory_buying_form_image[]" multiple accept="image/*">
                </div>

                <div id="cameraContainer" style="display:none">
                  <video id="video" style="width:100%;max-width:400px;border:1px solid #ccc" autoplay></video>
                  <button type="button" class="btn btn-primary btn-sm" id="capture">Capture & Upload</button>
                  <input type="hidden" id="imageDataHidden" name="setPhotoImage">
                </div>

                {{-- render existing images --}}
                <div class="image-grid mt-2">
                  @foreach(($row->id_images ?? []) as $img)   {{-- map this accessor in model --}}
                    <a href="{{ $img['url'] }}" target="_blank"><img src="{{ $img['thumb'] }}"></a>
                  @endforeach
                </div>
                <div id="buying_form_message"></div>
              </div>
            </div>

            {{-- Signature preview --}}
            @if(!empty($row->signature))
              <div class="row">
                <div class="form-group col-md-12">
                  <label>Signature</label><br>
                  <img src="{{ url($row->signature) }}" style="max-width:50%;border:1px solid #eee">
                </div>
              </div>
            @endif

            {{-- Funds payment method + conditional sections --}}
            <div class="row">
              <div class="form-group col-md-12">
                <label>Funds Payment method</label>
                <select class="form-control select2" id="funds_paid" name="funds_paid[]" multiple>
                  @foreach($fundsPaidOptions as $key => $label)
                    <option value="{{ $key }}" @selected(in_array((string)$key,$selectedFundsPaid))>{{ $label }}</option>
                  @endforeach
                </select>
              </div>
            </div>

            <div id="product_type_section" class="row" style="display:{{ $showProductType ? 'block':'none' }}">
              <div class="form-group col-md-6">
                <label>Product Type</label>
                <select class="form-control" name="getPageType" id="getPageType" required>
                  <option value="BD" @selected(($row->getPageType ?? 'BD')=='BD')>BD</option>
                  <option value="CR" @selected(($row->getPageType ?? '')=='CR')>CR</option>
                </select>
              </div>
            </div>

            {{-- Partial amounts repeater --}}
            <div id="partialAmountDiv" style="display:{{ $showPartial ? 'block':'none' }}">
              <label><strong>Partial Amounts</strong></label>
              <div id="partialAmountContainer">
                @php
                  $partials = $row->priceHistory ?? []; // accessor returning [{id,price}]
                @endphp

                @forelse($partials as $i => $p)
                  <div class="form-group row">
                    <div class="col-sm-6">
                      <input type="text" class="form-control partial-amount" name="partial_amount[]" value="{{ $p['price'] }}">
                      <input type="hidden" name="partial_amount_id[]" value="{{ $p['id'] }}">
                    </div>
                    <div class="col-sm-3">
                      @if($i===0)
                        <button type="button" class="btn btn-success addField"><i class="voyager-plus"></i></button>
                      @else
                        <button type="button" class="btn btn-danger removeField"><i class="voyager-trash"></i></button>
                      @endif
                    </div>
                  </div>
                @empty
                  <div class="form-group row">
                    <div class="col-sm-6">
                      <input type="text" class="form-control partial-amount" name="partial_amount[]" value="">
                      <input type="hidden" name="partial_amount_id[]" value="0">
                    </div>
                    <div class="col-sm-3">
                      <button type="button" class="btn btn-success addField"><i class="voyager-plus"></i></button>
                    </div>
                  </div>
                @endforelse
              </div>
              <small id="partial-error" class="text-danger"></small>
            </div>

            {{-- Message to customer (TinyMCE is already wired in your admin layout) --}}
            <div class="form-group">
              <label>Message from the team (Incorrect Payment)</label>
              <textarea class="form-control tiny_editor" name="message_from_the_team" rows="6">{{ old('message_from_the_team',$row->message_from_the_team) }}</textarea>
            </div>

            {{-- Email action buttons (wire these to your controller endpoints or AJAX) --}}
            <div class="row">
              <div class="form-group col-md-6">
                <label>More Info Email</label><br>
                <button type="button" class="btn btn-primary btn-sm" id="btn-more-info">Send / Resend</button>
                <span id="more_info_email_sent_time" class="ml-2">
                  {{ $row->more_info_email ? timeFormat($row->more_info_email) : '' }}
                </span>
                <div id="more-info-success-message"></div>
              </div>
              <div class="form-group col-md-6">
                <label>Paid Fund Email</label><br>
                <button type="button" class="btn btn-primary btn-sm" id="btn-paid-fund">Send / Resend</button>
                <span id="initial_email_sent_time" class="ml-2">
                  {{ $row->paid_fund_email ? timeFormat($row->paid_fund_email) : '' }}
                </span>
                <div id="success-message"></div>
              </div>
            </div>

          </div><!-- /.panel-body -->

          <div class="panel-footer">
            <button type="submit" class="btn btn-primary save">{{ __('voyager::generic.save') }}</button>
            {{-- Optional: Save & Close button --}}
            <button type="submit" name="submit" value="close" class="btn btn-warning text-black">Save & Close</button>
            <a href="{{ route('voyager.'.$dataType->slug.'.index') }}" class="btn btn-default">Back to List</a>
          </div>
        </form>

        {{-- Voyager media delete modal (kept as-is) --}}
        <div style="display:none">
          <input type="hidden" id="upload_url" value="{{ route('voyager.upload') }}">
          <input type="hidden" id="upload_type_slug" value="{{ $dataType->slug }}">
        </div>
      </div>

    </div>
  </div>
</div>
@stop

@section('javascript')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
<script>
  // Enable edit for fund_agreed
  document.getElementById('editFund').addEventListener('click', function(){
    const el = document.getElementById('fund_agreed');
    el.readOnly = !el.readOnly;
    if(!el.readOnly) el.focus();
  });

  // Select2
  $('.select2').select2({placeholder:'Choose one or more options'});

  // Toggle sections based on funds_paid
  $('#funds_paid').on('change', function(){
    const v = $(this).val() || [];
    const many = v.length > 1;
    const has3 = v.includes('3');
    $('#product_type_section').toggle(many || has3);
    $('#partialAmountDiv').toggle(has3);
  });

  // Repeater add/remove
  function toggleDeleteIcons(){
    const total = $('#partialAmountContainer .form-group.row').length;
    $('#partialAmountContainer .removeField').toggle(total>1);
  }
  $(document).on('click','.addField',function(){
    $('#partialAmountContainer').append(
      `<div class="form-group row">
        <div class="col-sm-6">
          <input type="text" class="form-control partial-amount" name="partial_amount[]" value="">
          <input type="hidden" name="partial_amount_id[]" value="0">
        </div>
        <div class="col-sm-3">
          <button type="button" class="btn btn-danger removeField"><i class="voyager-trash"></i></button>
        </div>
      </div>`
    );
    toggleDeleteIcons();
  });
  $(document).on('click','.removeField',function(){
    $(this).closest('.form-group.row').remove();
    toggleDeleteIcons();
  });
  toggleDeleteIcons();

  // Validate partial totals ≤ fund_agreed
  $(document).on('input','.partial-amount',function(){
    const agreed = parseFloat($('#fund_agreed').val()) || 0;
    let total = 0;
    $('.partial-amount').each(function(){ total += parseFloat($(this).val()) || 0; });
    if(total > agreed){
      $('#partial-error').text('Total partial amounts cannot exceed agreed amount.');
      $(this).val('');
    } else {
      $('#partial-error').text('');
    }
  });

  // File/Camera toggle (hooks only; wire your upload logic)
  $('input[name="inputOption"]').on('change', function(){
    if(this.value==='file'){
      $('#fileInputContainer').show(); $('#cameraContainer').hide(); stopStream('#video');
    } else {
      $('#fileInputContainer').hide(); $('#cameraContainer').show(); startStream('#video');
    }
  });

  function startStream(sel){
    const video = document.querySelector(sel);
    if(!navigator.mediaDevices) return;
    navigator.mediaDevices.getUserMedia({video:true}).then(s=>{
      video.srcObject = s; video.play();
    }).catch(()=>{});
  }
  function stopStream(sel){
    const video = document.querySelector(sel);
    if(video && video.srcObject){ video.srcObject.getTracks().forEach(t=>t.stop()); video.srcObject=null; }
  }
  $('#capture').on('click', function(e){
    e.preventDefault();
    const video = document.getElementById('video');
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth; canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video,0,0);
    document.getElementById('imageDataHidden').value = canvas.toDataURL('image/png');
    // trigger your AJAX upload or let form submit carry it
  });

  // Email buttons (AJAX to your endpoints)
  $('#btn-more-info').on('click', function(){
    // $.post('your-url', {...})
    // on success: $('#more_info_email_sent_time').text(newTime)
  });
  $('#btn-paid-fund').on('click', function(){
    // $.post('your-url', {...})
    // on success: $('#initial_email_sent_time').text(newTime)
  });
</script>
@stop