@extends('layouts.app')
@section('title',  __('invoice.add_invoice_layout'))

@section('content')
<style type="text/css">
</style>
<style>
/* خلفية رمادية خفيفة حول المودال */
.modal-content {
  background-color: #d1d1d1 !important;
  border: none;
  border-radius: 0;
  padding: 20px;
}



/* تكبير المودال ليتسع للفاتورة كاملة */
.invoice-modal {
  max-width: 1000px;
  width: 100%;
}

.invoice-modal .modal-content {
  min-height: 95vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* تحسين العرض على الشاشات الصغيرة */
@media (max-width: 992px) {
  #invoice-preview {
    width: 100%;
    min-height: auto;
    padding: 15px;
  }
  .invoice-modal {
    max-width: 95%;
  }
}


</style>
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('invoice.add_invoice_layout')</h1>
</section>

<!-- Main content -->
<section class="content">
{!! Form::open(['url' => action([\App\Http\Controllers\InvoiceLayoutController::class, 'storeForManualDEsign']), 'method' => 'post', 'id' => 'add_manual_form_invoice_form', 'files' => true]) !!}
  <div class="box box-solid">
    <div class="box-body">
      <div class="row">

        <div class="col-sm-6">
         <div class="form-group">
            {!! Form::label('name', __('invoice.layout_name') . ':*') !!}
              {!! Form::text('name', null, ['class' => 'form-control', 'required',
              'placeholder' => __('invoice.layout_name')]); !!}
          </div>
        </div>

        <div class="col-sm-6">
          <div class="form-group">
            {!! Form::label('design', __('lang_v1.design') . ':*') !!}
              {!! Form::select('design', $designs, 'manual', ['class' => 'form-control']); !!}
              <span class="help-block">
                @lang('lang_v1.used_for_browser_based_printing')
              </span>
          </div>

          <div class="form-group hide" id="columnize-taxes">
            <div class="col-md-3">
              <input type="text" class="form-control" 
              name="table_tax_headings[]" required="required" 
              placeholder="tax 1 name"
              disabled>
              @show_tooltip(__('lang_v1.tooltip_columnize_taxes_heading'))
            </div>
            <div class="col-md-3">
              <input type="text" class="form-control" 
              name="table_tax_headings[]" placeholder="tax 2 name"
              disabled>
            </div>
            <div class="col-md-3">
              <input type="text" class="form-control" 
              name="table_tax_headings[]" placeholder="tax 3 name"
              disabled>
            </div>
            <div class="col-md-3">
              <input type="text" class="form-control" 
              name="table_tax_headings[]" placeholder="tax 4 name"
              disabled>
            </div>
          </div>
        </div>
             <div class="clearfix"></div>
            <div class="col-sm-6">
                <div class="form-group">
                    <div class="checkbox">
                    <label>
                        {!! Form::checkbox('show_letter_head', 1, false, 
                            ['class' => 'input-icheck toggle-preview', 'id' => 'show_letter_head', 'data-target' => 'preview-letter-head']); !!} @lang('lang_v1.show_letter_head')</label>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 letter_head_input hide">
                <div class="form-group">
                    {!! Form::label('letter_head', __('lang_v1.letter_head') . ':') !!}
                    {!! Form::file('letter_head', ['accept' => 'image/*']); !!}
                    <span class="help-block">@lang('lang_v1.letter_head_help') <br> @lang('lang_v1.invoice_logo_help', ['max_size' => '1 MB'])</span>
                </div>
            </div>
        <div class="clearfix"></div>
     
       <!-- Logo -->
        <div class="col-sm-6 hide-for-letterhead">
          <div class="form-group">
            {!! Form::label('logo', __('invoice.invoice_logo') . ':') !!}
            {!! Form::file('logo', ['accept' => 'image/*']); !!}
            <span class="help-block">@lang('lang_v1.invoice_logo_help', ['max_size' => '1 MB'])</span>
          </div>
        </div>
        <div class="col-sm-6 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_logo', 1, false, ['class' => 'input-icheck toggle-preview','data-target' => 'preview-logo']); !!} @lang('invoice.show_logo')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-12 hide-for-letterhead">
          <div class="form-group">
            {!! Form::label('header_text', __('invoice.header_text') . ':' ) !!}
            {!! Form::textarea('header_text','', ['class' => 'form-control',
              'placeholder' => __('invoice.header_text'), 'rows' => 3]); !!}
          </div>
        </div>
      </div>
        <div class="clearfix"></div>
        
   
  </div>
  <div class="box box-solid">
    <div class="box-body">
      <div class="row">
           <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('invoice_heading', __('invoice.invoice_heading') . ':' ) !!}
            {!! Form::text('invoice_heading', 'Invoice', ['class' => 'form-control',
              'placeholder' => __('invoice.invoice_heading') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('invoice_heading_not_paid', __('invoice.invoice_heading_not_paid') . ':' ) !!}
            {!! Form::text('invoice_heading_not_paid', null, ['class' => 'form-control',
              'placeholder' => __('invoice.invoice_heading_not_paid') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('invoice_heading_paid', __('invoice.invoice_heading_paid') . ':' ) !!}
            {!! Form::text('invoice_heading_paid', null, ['class' => 'form-control',
              'placeholder' => __('invoice.invoice_heading_paid') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('proforma_heading', __('lang_v1.proforma_heading') . ':' ) !!}
            @show_tooltip(__('lang_v1.tooltip_proforma_heading'))
            {!! Form::text('common_settings[proforma_heading]', __('lang_v1.proforma_invoice'), ['class' => 'form-control',
              'placeholder' => __('lang_v1.proforma_heading'), 'id' => 'proforma_heading' ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('quotation_heading', __('lang_v1.quotation_heading') . ':' ) !!}
            @show_tooltip(__('lang_v1.tooltip_quotation_heading'))
            {!! Form::text('quotation_heading', __('lang_v1.quotation'), ['class' => 'form-control',
              'placeholder' => __('lang_v1.quotation_heading') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('sales_order_heading', __('lang_v1.sales_order_heading') . ':' ) !!}
            {!! Form::text('common_settings[sales_order_heading]', __('lang_v1.sales_order'), ['class' => 'form-control',
              'placeholder' => __('lang_v1.sales_order_heading'), 'id' => 'sales_order_heading' ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('invoice_no_prefix', __('invoice.invoice_no_prefix') . ':' ) !!}
            {!! Form::text('invoice_no_prefix', __('sale.invoice_no'), ['class' => 'form-control',
              'placeholder' => __('invoice.invoice_no_prefix') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('quotation_no_prefix', __('lang_v1.quotation_no_prefix') . ':' ) !!}
            {!! Form::text('quotation_no_prefix', __('lang_v1.quotation_no'), ['class' => 'form-control',
              'placeholder' => __('lang_v1.quotation_no_prefix') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('date_label', __('lang_v1.date_label') . ':' ) !!}
            {!! Form::text('date_label', __('lang_v1.date'), ['class' => 'form-control',
              'placeholder' => __('lang_v1.date_label') ]); !!}
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('due_date_label', __('lang_v1.due_date_label') . ':' ) !!}
            {!! Form::text('common_settings[due_date_label]', __('lang_v1.due_date'), ['class' => 'form-control',
              'placeholder' => __('lang_v1.due_date_label'), 'id' => 'due_date_label' ]); !!}
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('common_settings[show_due_date]', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-due-date']); !!} @lang('lang_v1.show_due_date')</label>
              </div>
          </div>
        </div>
         <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('date_time_format', __('lang_v1.date_time_format') . ':' ) !!}
            {!! Form::text('date_time_format', null, ['class' => 'form-control',
              'placeholder' => __('lang_v1.date_time_format') ]); !!} 
              <p class="help-block">{!! __('lang_v1.date_time_format_help') !!}</p>
          </div>
        </div>
   
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('sales_person_label', __('lang_v1.sales_person_label') . ':' ) !!}
            {!! Form::text('sales_person_label', null, ['class' => 'form-control',
            'placeholder' => __('lang_v1.sales_person_label') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('commission_agent_label', __('lang_v1.commission_agent_label') . ':' ) !!}
            {!! Form::text('commission_agent_label', __('lang_v1.commission_agent'), ['class' => 'form-control',
            'placeholder' => __('lang_v1.commission_agent_label') ]); !!}
          </div>
        </div>
        <div class="clearfix"></div>
        
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_business_name', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-business-name']); !!} @lang('invoice.show_business_name')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_location_name', 1, true, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-location-name']); !!} @lang('invoice.show_location_name')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_sales_person', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-sales-person']); !!} @lang('lang_v1.show_sales_person')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_commission_agent', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-commission-agent']); !!} @lang('lang_v1.show_commission_agent')</label>
              </div>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="col-sm-12">
          <h4>@lang('lang_v1.fields_for_customer_details'):</h4>
        </div>
       <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_customer', 1, true, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-customer']); !!} @lang('invoice.show_customer')</label>
              </div>
          </div>
        </div>
         <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('customer_label', __('invoice.customer_label') . ':' ) !!}
            {!! Form::text('customer_label', __('contact.customer'), ['class' => 'form-control',
              'placeholder' => __('invoice.customer_label') ]); !!}
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_client_id', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-client-id']); !!} @lang('lang_v1.show_client_id')</label>
              </div>
          </div>
        </div>
        
       <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('client_id_label', __('lang_v1.client_id_label') . ':' ) !!}
            {!! Form::text('client_id_label', null, ['class' => 'form-control',
              'placeholder' => __('lang_v1.client_id_label') ]); !!}
          </div>
        </div>
        
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('client_tax_label', __('lang_v1.client_tax_label') . ':' ) !!}
            {!! Form::text('client_tax_label', null, ['class' => 'form-control',
            'placeholder' => __('lang_v1.client_tax_label') ]); !!}
          </div>
        </div>
        <div class="clearfix"></div>
       

      </div>
      <div class="row hide-for-letterhead">
      <div class="col-sm-12 hide">
            <h4>@lang('invoice.fields_to_be_shown_in_address'):</h4>
        </div>
        <div class="clearfix"></div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_landmark', 1, true, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-landmark']); !!} @lang('business.landmark')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_city', 1, true, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-city']); !!} @lang('business.city')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_state', 1, true, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-state']); !!} @lang('business.state')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_country', 1, true, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-country']); !!} @lang('business.country')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_zip_code', 1, true, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-zip-code']); !!} @lang('business.zip_code')</label>
              </div>
          </div>
        </div>
        
        <div class="col-sm-12 hide">
          <div class="form-group">
            <label>@lang('invoice.fields_to_shown_for_communication'):</label>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_mobile_number', 1, true, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-mobile-number']); !!} @lang('invoice.show_mobile_number')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_alternate_number', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-alternate-number']); !!} @lang('invoice.show_alternate_number')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_email', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-email']); !!} @lang('invoice.show_email')</label>
              </div>
          </div>
        </div>
        
        <div class="col-sm-12 hide">
          <div class="form-group">
            <label>@lang('invoice.fields_to_shown_for_tax'):</label>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_tax_1', 1, true, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-tax1']); !!} @lang('invoice.show_tax_1')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_tax_2', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-tax2']); !!} @lang('invoice.show_tax_2')</label>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="box box-solid">
    <div class="box-body">
      <div class="row">
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('table_product_label', __('lang_v1.product_label') . ':' ) !!}
            {!! Form::text('table_product_label', __('sale.product'), ['class' => 'form-control',
              'placeholder' => __('lang_v1.product_label') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('table_qty_label', __('lang_v1.qty_label') . ':' ) !!}
            {!! Form::text('table_qty_label', __('lang_v1.quantity'), ['class' => 'form-control',
              'placeholder' => __('lang_v1.qty_label') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('table_unit_price_label', __('lang_v1.unit_price_label') . ':' ) !!}
            {!! Form::text('table_unit_price_label', __('sale.unit_price'), ['class' => 'form-control',
              'placeholder' => __('lang_v1.unit_price_label') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('table_subtotal_label', __('lang_v1.subtotal_label') . ':' ) !!}
            {!! Form::text('table_subtotal_label', __('sale.subtotal'), ['class' => 'form-control',
              'placeholder' => __('lang_v1.subtotal_label') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('cat_code_label', __('lang_v1.cat_code_label') . ':' ) !!}
            {!! Form::text('cat_code_label', 'HSN', ['class' => 'form-control',
              'placeholder' => 'HSN or Category Code' ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('total_quantity_label', __('lang_v1.total_quantity_label') . ':' ) !!}
            {!! Form::text('common_settings[total_quantity_label]', 'Total Quantity', ['class' => 'form-control',
              'placeholder' => __('lang_v1.total_quantity_label'), 'id' => 'total_quantity_label' ]); !!}
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('item_discount_label', __('lang_v1.item_discount_label') . ':' ) !!}
            {!! Form::text('common_settings[item_discount_label]', 'Discount', ['class' => 'form-control',
              'placeholder' => __('lang_v1.item_discount_label'), 'id' => 'item_discount_label' ]); !!}
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('discounted_unit_price_label', __('lang_v1.discounted_unit_price_label') . ':' ) !!}
            {!! Form::text('common_settings[discounted_unit_price_label]', 'Price after discount', ['class' => 'form-control',
              'placeholder' => __('lang_v1.discounted_unit_price_label'), 'id' => 'discounted_unit_price_label' ]); !!}
          </div>
        </div>
        
        <div class="col-sm-12 hide">
          <h4>@lang('lang_v1.product_details_to_be_shown'):</h4>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_brand', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-brand']); !!} @lang('lang_v1.show_brand')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_sku', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-sku']); !!} @lang('lang_v1.show_sku')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_cat_code', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-cat-code']); !!} @lang('lang_v1.show_cat_code')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
              {!! Form::checkbox('show_sale_description', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-sale-description']); !!} @lang('lang_v1.show_sale_description')</label>
            </div>
            <p class="help-block">@lang('lang_v1.product_imei_or_sn')</p>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('common_settings[show_product_description]', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-product-description']); !!} @lang('lang_v1.show_product_description')</label>
              </div>
          </div>
        </div>
        
        <div class="clearfix"></div>
        @if(request()->session()->get('business.enable_product_expiry') == 1)
          <div class="col-sm-3 hide">
            <div class="form-group">
              <div class="checkbox">
                <label>
                  {!! Form::checkbox('show_expiry', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-expiry']); !!} @lang('lang_v1.show_product_expiry')</label>
                </div>
            </div>
          </div>
        @endif
        @if(request()->session()->get('business.enable_lot_number') == 1)
          <div class="col-sm-3 hide">
            <div class="form-group">
              <div class="checkbox">
                <label>
                  {!! Form::checkbox('show_lot', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-lot']); !!} @lang('lang_v1.show_lot_number')</label>
                </div>
            </div>
          </div>
        @endif

        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_image', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-image']); !!} @lang('lang_v1.show_product_image')</label>
              </div>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('common_settings[show_warranty_name]', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-warranty-name']); !!} @lang('lang_v1.show_warranty_name')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('common_settings[show_warranty_exp_date]', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-warranty-exp-date']); !!} @lang('lang_v1.show_warranty_exp_date')</label>
              </div>
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('common_settings[show_warranty_description]', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-warranty-description']); !!} @lang('lang_v1.show_warranty_description')</label>
              </div>
          </div>
        </div>

        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('common_settings[show_base_unit_details]', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-base-unit-details']); !!} @lang('lang_v1.show_base_unit_details')</label>
              </div>
          </div>
        </div>

      </div>

    </div>
  </div>
  <div class="box box-solid">
    <div class="box-body">
      <div class="row">
       <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('sub_total_label', __('invoice.sub_total_label') . ':' ) !!}
            {!! Form::text('sub_total_label', __('sale.subtotal'), ['class' => 'form-control',
              'placeholder' => __('invoice.sub_total_label') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('discount_label', __('invoice.discount_label') . ':' ) !!}
            {!! Form::text('discount_label', __('sale.discount'), ['class' => 'form-control',
              'placeholder' => __('invoice.discount_label') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('tax_label', __('invoice.tax_label') . ':' ) !!}
            {!! Form::text('tax_label', __('sale.tax'), ['class' => 'form-control',
              'placeholder' => __('invoice.tax_label') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('total_label', __('invoice.total_label') . ':' ) !!}
            {!! Form::text('total_label', __('sale.total'), ['class' => 'form-control',
              'placeholder' => __('invoice.total_label') ]); !!}
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('total_items_label', __('lang_v1.total_items_label') . ':' ) !!}
            {!! Form::text('common_settings[total_items_label]', null, ['class' => 'form-control',
              'placeholder' => __('lang_v1.total_items_label'), 'id' => 'total_items_label' ]); !!}
          </div>
        </div>
        
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('round_off_label', __('lang_v1.round_off_label') . ':' ) !!}
            {!! Form::text('round_off_label', __('lang_v1.round_off'), ['class' => 'form-control',
              'placeholder' => __('lang_v1.round_off_label') ]); !!}
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('total_due_label', __('invoice.total_due_label') . ' (' . __('lang_v1.current_sale') . '):' ) !!}
            {!! Form::text('total_due_label', __('report.total_due'), ['class' => 'form-control',
              'placeholder' => __('invoice.total_due_label') ]); !!}
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('paid_label', __('invoice.paid_label') . ':' ) !!}
            {!! Form::text('paid_label', __('sale.total_paid'), ['class' => 'form-control',
              'placeholder' => __('invoice.paid_label') ]); !!}
          </div>
        </div>
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_payments', 1, true, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-show-payments']); !!} @lang('invoice.show_payments')</label>
              </div>
          </div>
        </div>

        <!-- Barcode -->
        <div class="col-sm-3 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_barcode', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-barcode']); !!} @lang('invoice.show_barcode')</label>
              </div>
          </div>
        </div>
        <div class="clearfix"></div>
         <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('prev_bal_label', __('invoice.total_due_label') . ' (' . __('lang_v1.all_sales') . '):' ) !!}
            {!! Form::text('prev_bal_label', '', ['class' => 'form-control',
              'placeholder' => __('invoice.total_due_label') ]); !!}
          </div>
        </div>
        <div class="col-sm-5 hide">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('show_previous_bal', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-previous-bal']); !!} @lang('lang_v1.show_previous_bal_due')</label>
                @show_tooltip(__('lang_v1.previous_bal_due_help'))
              </div>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('change_return_label', __('lang_v1.change_return_label') . ':' ) !!} @show_tooltip(__('lang_v1.change_return_help'))
            {!! Form::text('change_return_label', __('lang_v1.change_return'), ['class' => 'form-control',
              'placeholder' => __('lang_v1.change_return_label') ]); !!}
          </div>
        </div>
        <div class="col-sm-3 hide" id="hide_price_div">
          <div class="form-group">
            <div class="checkbox">
              <label>
                {!! Form::checkbox('common_settings[hide_price]', 1, false, ['class' => 'input-icheck toggle-preview', 'data-target' => 'preview-hide-all-prices']); !!} @lang('lang_v1.hide_all_prices')</label>
              </div>
          </div>
        </div>

        <div class="col-sm-3 hide">
          <div class="form-group">
              <label>
                {!! Form::checkbox('common_settings[show_total_in_words]', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-total-in-words']); !!} @lang('lang_v1.show_total_in_words')</label> @show_tooltip(__('lang_v1.show_in_word_help'))
                @if(!extension_loaded('intl'))
                  <p class="help-block">@lang('lang_v1.enable_php_intl_extension')</p>
                @endif
          </div>
        </div>
          <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('word_format', __('lang_v1.word_format') . ':') !!} 
            @show_tooltip(__('lang_v1.word_format_help'))
            {!! Form::select('common_settings[num_to_word_format]', ['international' => __('lang_v1.international'), 'indian' => __('lang_v1.indian')], 'international', ['class' => 'form-control', 'id' => 'word_format']); !!}
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('tax_summary_label', __('lang_v1.tax_summary_label') . ':' ) !!}
            {!! Form::text('common_settings[tax_summary_label]', '', ['class' => 'form-control', 'placeholder' => __('lang_v1.tax_summary_label'), 'id' => 'tax_summary_label' ]); !!}
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="box box-solid">
    <div class="box-body">
      <div class="row">
        <div class="col-sm-12">
        
       <div class="col-sm-6 hide">
          <div class="form-group">
            {!! Form::label('highlight_color', __('invoice.highlight_color') . ':' ) !!}
            {!! Form::text('highlight_color', '#000000', ['class' => 'form-control',
              'placeholder' => __('invoice.highlight_color') ]); !!}
          </div>
        </div>

        <div class="clearfix"></div>
        <div class="col-md-12 hide">
          <hr/>
        </div>
        
        <div class="col-sm-12">
          <div class="form-group">
            {!! Form::label('footer_text', __('invoice.footer_text') . ':' ) !!}
              {!! Form::textarea('footer_text', null, ['class' => 'form-control',
              'placeholder' => __('invoice.footer_text'), 'rows' => 3]); !!}
          </div>
        </div>
        
        <div class="col-sm-6">
          <div class="form-group">
            <br>
            <div class="checkbox">
              <label>
                {!! Form::checkbox('is_default', 1,false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-barcode']); !!} @lang('barcode.set_as_default')</label>
            </div>
          </div>
        </div>
       
        
      </div>
    </div>
  </div>
</div>


@component('components.widget', ['class' => 'box-solid hide', 'title' => __('lang_v1.qr_code')])
  <div class="row">
    <div class="col-sm-4 hide">
      <div class="form-group">
        <div class="checkbox">
          <label>
            {!! Form::checkbox('show_qr_code', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-qr-code']); !!} @lang('lang_v1.show_qr_code')</label>
        </div>
      </div>
    </div>
    <div class="col-sm-4 hide">
        <div class="form-group">
            <div class="checkbox">
                <label>
                {!! Form::checkbox('common_settings[show_qr_code_label]', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-qr-code-label']); !!} @lang('lang_v1.show_labels')</label>
            </div>
        </div>
    </div>
    <div class="col-sm-4 hide">
        <div class="form-group">
            <div class="checkbox">
                <label>
                {!! Form::checkbox('common_settings[zatca_qr]', 1, false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-', 'id' => 'zatca_qr']); !!} @lang('lang_v1.zatca_qr')</label>
                @show_tooltip(__('lang_v1.zatca_qr_help'))
            </div>
        </div>
    </div>
    <div class="col-sm-4" id="zatca_phase_container" style="display: none;">
      <div class="form-group">
        {!! Form::label('zatca_phase', __('lang_v1.zatca_phase') . ':*') !!}
          {!! Form::select('common_settings[zatca_phase]', [
            'phase_1' => __('lang_v1.zatca_phase1'),
            'phase_2' => __('lang_v1.zatca_phase2'),
          ],$invoice_layout->common_settings['zatca_phase'] ?? null , ['class' => 'form-control', 'id' => 'zatca_phase']); !!}
            <small id="phase2_message" style="display: none; color: green; font-size: 12px;">
              {{ __('lang_v1.phase2_message') }}
          </small>
      </div>
    </div>
    <div class="clearfix"></div>
    <div class="col-md-12">
      <h4>@lang('lang_v1.fields_to_be_shown'):</h4>
    </div>
    <div class="col-sm-4 hide">
      <div class="form-group">
        <div class="checkbox">
          <label>
            {!! Form::checkbox('qr_code_fields[]', 'business_name', false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-business-name']); !!} @lang('business.business_name')</label>
        </div>
      </div>
    </div>
    <div class="col-sm-4 hide">
      <div class="form-group">
        <div class="checkbox">
          <label>
            {!! Form::checkbox('qr_code_fields[]', 'address', false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-business-location']); !!} @lang('lang_v1.business_location_address')</label>
        </div>
      </div>
    </div>
    <div class="col-sm-4 hide">
      <div class="form-group">
        <div class="checkbox">
          <label>
            {!! Form::checkbox('qr_code_fields[]', 'tax_1', false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-tax1']); !!} @lang('lang_v1.business_tax_1')</label>
        </div>
      </div>
    </div>
    <div class="col-sm-4 hide">
      <div class="form-group">
        <div class="checkbox">
          <label>
            {!! Form::checkbox('qr_code_fields[]', 'tax_2', false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-tax2']); !!} @lang('lang_v1.business_tax_2')</label>
        </div>
      </div>
    </div>
    <div class="col-sm-4 hide">
      <div class="form-group">
        <div class="checkbox">
          <label>
            {!! Form::checkbox('qr_code_fields[]', 'invoice_no', false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-invoice-number']); !!} @lang('sale.invoice_no')</label>
        </div>
      </div>
    </div>
    <div class="col-sm-4 hide">
      <div class="form-group">
        <div class="checkbox">
          <label>
            {!! Form::checkbox('qr_code_fields[]', 'invoice_datetime', true, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-invoice-date']); !!} @lang('lang_v1.invoice_datetime')</label>
        </div>
      </div>
    </div>
    <div class="col-sm-4 hide">
      <div class="form-group">
        <div class="checkbox">
          <label>
            {!! Form::checkbox('qr_code_fields[]', 'subtotal', false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-subtotal']); !!} @lang('sale.subtotal')</label>
        </div>
      </div>
    </div>
    <div class="col-sm-4 hide">
      <div class="form-group">
        <div class="checkbox">
          <label>
            {!! Form::checkbox('qr_code_fields[]', 'total_amount', false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-total-amount']); !!} @lang('lang_v1.total_amount_with_tax')</label>
        </div>
      </div>
    </div>
    <div class="col-sm-4 hide">
      <div class="form-group">
        <div class="checkbox">
          <label>
            {!! Form::checkbox('qr_code_fields[]', 'total_tax', false, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-total-tax']); !!} @lang('lang_v1.total_tax')</label>
        </div>
      </div>
    </div>
    <div class="col-sm-4 hide">
      <div class="form-group">
        <div class="checkbox">
          <label>
            {!! Form::checkbox('qr_code_fields[]', 'customer_name', true, ['class' => 'input-icheck toggle-preview' ,'data-target' => 'preview-customer-name']); !!} @lang('sale.customer_name')</label>
        </div>
      </div>
    </div>

  </div>
  @endcomponent
  @if(!empty($enabled_modules) && in_array('types_of_service', $enabled_modules) )
    @include('types_of_service.invoice_layout_settings')
  @endif
<!-- Call restaurant module if defined -->
<div class="hide">
    @include('restaurant.partials.invoice_layout')
  </div>



<div class="box box-solid">
  <div class="box-header with-border">
    <h3 class="box-title">@lang('lang_v1.layout_credit_note')</h3>
  </div>

  <div class="box-body">
    <div class="row">
      
     <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('cn_heading', __('lang_v1.cn_heading') . ':' ) !!}
            {!! Form::text('cn_heading', 'Credit Note', ['class' => 'form-control',
              'placeholder' => __('lang_v1.cn_heading') ]); !!}
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('cn_no_label', __('lang_v1.cn_no_label') . ':' ) !!}
            {!! Form::text('cn_no_label', __('purchase.ref_no'), ['class' => 'form-control',
              'placeholder' => __('lang_v1.cn_no_label') ]); !!}
          </div>
        </div>

        <div class="col-sm-3">
          <div class="form-group">
            {!! Form::label('cn_amount_label', __('lang_v1.cn_amount_label') . ':' ) !!}
            {!! Form::text('cn_amount_label', 'Credit Amount', ['class' => 'form-control', 'placeholder' => __('lang_v1.cn_amount_label') ]); !!}
          </div>
        </div>
      </div>
      <div class="col-sm-3 hide">
        <div class="form-group">
          <div class="checkbox">
            <label>
              <input type="checkbox" id="toggle_hidden_fields"> إظهار جميع الحقول المخفية
            </label>
          </div>
        </div>
      </div>
  </div>
</div>

 <div class="box box-solid">
    <div class="box-header with-border">
      <h3 class="box-title">التنسيقات</h3>
    </div>
    <div class="box-body">
      <div class="row">
           <div class="col-sm-4">
          <div class="form-group">
            <div class="checkbox">
                <input class="form-check-input" type="checkbox" id="toggleBorders" name="table_borders">
                <label class="form-check-label" for="toggleBorders">إظهار حدود الجدول</label>
            </div>
          </div>
        </div>
       <div class="col-sm-4">
        <div class="form-group">
            <label>لون التمييز (عناوين الجدول ):</label>
            <input type="color" id="highlight-color-picker" name="highlight_color" value="#ffcc00" class="form-control">
            <small class="help-block">اختر لونًا لتطبيقه على عناوين الجدول .</small>
        </div>
        </div>
     
        <div class="col-sm-4">
         <div class="form-group">
            {!! Form::label('measurement', __('lang_v1.measurements') . ':*') !!}
              {!! Form::select('measurement', $measurements, 'A4', ['class' => 'form-control']); !!}
              <span class="help-block">
                @lang('lang_v1.used_for_measurements')
              </span>
          </div>
        </div>
        <div class="col-sm-4 hide">
          <div class="form-group">
            <div class="checkbox">
                <input class="form-check-input" type="checkbox" id="swapHeader" name="swap_info">
              <label class="form-check-label" for="swapHeader">
                تبديل أماكن العنوانين
              </label>
            </div>
          </div>
        </div>
        <div class="col-sm-4 hide" style="margin-right: 20px">
            <div class="form-group">
              <div class="checkbox">
                <input type="checkbox" id="swapCols" name="swap_payment_details">
                <label for="swapCols">تبديل أماكن العمودين</label>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>

{{-- قسم معاينة الفاتورة --}}
<div class="row">
   <div class="col-sm-4">
    <div class="hide-elements-section">
    <div class="card">
    
        <div class="card-body">
        <div class="d-flex">
            <div id="hide-elements">
            @include('invoice_layout.hide_elements_custom')
            </div>
        </div>
        </div>
        </div>
     </div>
    </div>
   <div class="col-sm-6">
    <div class="invoice-preview-section">
    <div class="card">
    
        <div class="card-body">
        <div class="d-flex">
            <div id="invoice-preview">
            @include('invoice_layout.classic_layout_for_custom')
            </div>
        </div>
        </div>
    </div>
    </div>
    </div>
</div>


<input type="hidden" name="elements_positions" id="elements_positions" value="{}">
    <input type="hidden" id="design_state" name="design_state">
    <input type="hidden" id="measurement_value" name="measurement_value">
    @if(isset($saved_design_state))
        <input type="hidden" id="saved_design_state" value="{{ json_encode($saved_design_state) }}">
    @endif
    <div class="row">
    <div class="row">
    <div class="col-sm-12 text-center">
      <button type="submit" class="tw-dw-btn tw-dw-btn-primary tw-text-white tw-dw-btn-lg">@lang('messages.save')</button>
    </div>
  </div>

  {!! Form::close() !!}
</section>
    </div>


    </div>

    <br><br>




<!-- /.content -->
@stop
@section('javascript')
<script>
$(document).ready(function() {
    $('select[name="design"]').on('change', function() {
        var selectedDesign = $(this).val();
        
        if (selectedDesign != 'manual') {
            // عرض شاشة تحميل
            showLoadingScreen();
            
            // الانتقال إلى صفحة التصميم اليدوي بعد تأخير بسيط
            setTimeout(function() {
                window.location.href = '{{ route("invoice-layout.create") }}';
            }, 500); // تأخير 0.5 ثانية لرؤية شاشة التحميل
        }
    });
    
    // دالة لعرض شاشة التحميل
    function showLoadingScreen() {
        // إنشاء overlay للتحميل
        var loadingOverlay = $(
            '<div id="manual-design-loading" style="' +
            'position: fixed; top: 0; left: 0; width: 100%; height: 100%; ' +
            'background-color: rgba(0,0,0,0.7); z-index: 9999; ' +
            'display: flex; justify-content: center; align-items: center;">' +
            '<div style="text-align: center; color: white;">' +
            '<i class="fa fa-spinner fa-spin fa-3x"></i>' +
            '<h3 style="margin-top: 20px;">جاري التحميل  ...</h3>' +
            '</div>' +
            '</div>'
        );
        
        $('body').append(loadingOverlay);
    }
});
</script>
<script type="text/javascript">
  __page_leave_confirmation('#add_invoice_layout_form');
    $(document).on('ifChanged', '#show_letter_head', function() {
        letter_head_changed();
    });

    function letter_head_changed() {
        if($('#show_letter_head').is(":checked")) {
            $('.hide-for-letterhead').addClass('hide');
            $('.letter_head_input').removeClass('hide');
        } else {
            $('.hide-for-letterhead').removeClass('hide');
            $('.letter_head_input').addClass('hide');
        }
    }

    $(document).ready(function(){
        letter_head_changed();
    })
</script>
<script>
  $(document).ready(function () {
      function toggleZatcaPhase() {
          if ($('#zatca_qr').is(':checked')) {
              $('#zatca_phase_container').fadeIn();
          } else {
              $('#zatca_phase_container').fadeOut();
          }
      }

      function checkPhaseSelection(){
        if ($('#zatca_phase').val() === 'phase_2') {
            $('#phase2_message').fadeIn();
        } else {
            $('#phase2_message').fadeOut();
        }
      }
      // $(document).on('change', '#zatca_qr', function () {
      //       toggleZatcaPhase();
      // });

      $('#zatca_qr').on('ifChanged', function(event){
        //Check if checkbox is checked or not
        toggleZatcaPhase()
      });


      $('#zatca_phase').on('change', function () {
        checkPhaseSelection();
      });
  });
$(document).ready(function() {
    $('[hidden]').each(function() {
        $(this).attr('data-original-hidden', 'true');
    });

    $('#toggle_hidden_fields').on('change', function() {
        if ($(this).is(':checked')) {
            $('[data-original-hidden="true"]').removeAttr('hidden');
        } else {
            $('[data-original-hidden="true"]').attr('hidden', true);
        }
    });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {

    // ================== الحقول النصية العادية ==================
    function bindLivePreview(inputSelector, previewSelector, defaultText = '') {
        const $input = $(inputSelector);
        const $preview = $(previewSelector);

        // عرض القيمة عند التحميل (سواء افتراضية أو مخزنة)
        $preview.text($input.val() || defaultText);

        // تحديث عند التغيير
        $input.on('input change', function() {
            $preview.text($(this).val() || defaultText);
        });
    }

    // أمثلة على الحقول
    bindLivePreview('input[name="table_product_label"]', '#preview_table_product_label', 'منتج');
    bindLivePreview('input[name="table_qty_label"]', '#preview_table_qty_label', 'الكمية');
    bindLivePreview('input[name="table_unit_price_label"]', '#preview_table_unit_price_label', 'سعر الوحدة');
    // bindLivePreview('input[name="table_item_discount_label"]', '#preview_item_discount_label', 'خصم');
    // bindLivePreview('input[name="table_discounted_unit_price_label"]', '#preview_discounted_unit_price_label', 'السعر بعد الخصم');
    bindLivePreview('input[name="table_subtotal_label"]', '#preview_table_subtotal_label', 'السعر الكلي');
    bindLivePreview('input[name="total_items_label"]', '#preview_total_items_label', '');
    bindLivePreview('input[name="total_quantity_label"]', '#preview_total_quantity_label', '');
    bindLivePreview('input[name="discount_label"]', '#preview_discount_label', '');
    bindLivePreview('input[name="sub_total_label"]', '#preview_sub_total_label', '');
    bindLivePreview('input[name="total-amount"]', '#preview-total-amount', '');
    bindLivePreview('input[name="subtotal"]', '#preview_subtotal', '');
    bindLivePreview('input[name="total_label"]', '#preview_total_label', '');
    bindLivePreview('input[name="tax_label"]', '#preview_tax_label', '');
    bindLivePreview('input[name="tax1"]', '#preview_tax1', '');
    bindLivePreview('input[name="tax2"]', '#preview_tax2', '');
    bindLivePreview('input[name="paid_label"]', '#preview_paid_label', '');
    bindLivePreview('input[name="total_due_label"]', '#preview_total_due_label', '');
    bindLivePreview('input[name="invoice_no_prefix"]', '#preview_invoice_no_prefix', '[رقم الفاتورة]');
    bindLivePreview('input[name="date_label"]', '#preview_date_label', 'Date');
    bindLivePreview('#due_date_label', '#preview_due_date_label', 'Due Date');
    bindLivePreview('input[name="invoice_heading"]', '#preview_invoice_heading', 'Invoice');

    // عمل نفس الشيء مع باقي الحقول...
    bindLivePreview('input[name="sales_person_label"]', '#preview_sales_person_label', 'Sales Person');
    bindLivePreview('input[name="commission_agent_label"]', '#preview_commission_agent_label', 'Commission Agent');
    bindLivePreview('input[name="customer_label"]', '#preview_customer_label', 'Customer');
    bindLivePreview('input[name="client_id_label"]', '#preview_client_id_label', 'Client ID');
    bindLivePreview('input[name="client_tax_label"]', '#preview_client_tax_label', 'Tax Number');
    bindLivePreview('textarea[name="footer_text"]', '#preview_footer_text', 'Thank you for your business!');

    // ================== رفع الصور ==================
    function bindImageUpload(inputSelector, previewSelector) {
        $(inputSelector).on('change', function() {
            const reader = new FileReader();
            reader.onload = e => $(previewSelector).attr('src', e.target.result).show();
            if (this.files[0]) reader.readAsDataURL(this.files[0]);
        });
    }

    bindImageUpload('input[name="letter_head"]', '#preview-letter-head');
    bindImageUpload('input[name="logo"]', '#preview-logo');

    // ================== التشيك بوكس ==================
    function bindToggleCheckbox(checkboxSelector, previewSelector) {
        const $checkbox = $(checkboxSelector);
        const $preview = $(previewSelector);

        // حالة افتراضية عند التحميل
        if ($checkbox.is(':checked')) {
            $preview.show();
        } else {
            $preview.hide();
        }

        // عند التغيير
        $checkbox.on('ifChanged change', function() {
            if ($(this).is(':checked')) {
                $preview.show();
            } else {
                $preview.hide();
            }
        });
    }

    // مثال للشعار
    bindToggleCheckbox('input[name="show_logo"]', '#preview-logo');
    // مثال لاسم النشاط
    bindToggleCheckbox('input[name="show_business_name"]', '#preview-business-name');
    // مثال QR
    bindToggleCheckbox('input[name="show_qr_code"]', '#preview-qr-code');
    // مثال Letter Head
    bindToggleCheckbox('#show_letter_head', '#preview-letter-head');

});
</script>
<script>
$(document).ready(function() {
    // دالة لتحديث الحالة
    function updateToggle($checkbox) {
        var targetId = $checkbox.data('target');
        var $target = $('#' + targetId);

        if ($checkbox.prop('checked')) {
            $target.removeClass('hide');
        } else {
            $target.addClass('hide');
        }
    }

    // ربط الأحداث الخاصة بـ iCheck
    $('.toggle-preview').on('ifChecked', function() {
        updateToggle($(this));
    }).on('ifUnchecked', function() {
        updateToggle($(this));
    });

    // تحديث أولي عند تحميل الصفحة
    $('.toggle-preview').each(function() {
        updateToggle($(this));
    });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", () => {
 const themeColor = '#ffcc00';
    const headerCells = document.querySelectorAll('table thead tr th');
    const colorPicker = document.getElementById('highlight-color-picker');
    // تعريف جميع checkboxes
    const checkboxes = {
        toggleBorders: document.getElementById('toggleBorders'),
        swapHeader: document.getElementById('swapHeader'),
        swapCols: document.getElementById('swapCols')
    };
       // -------------------------
    // دالة تطبيق اللون
    // -------------------------
    function applyHighlightColor(color) {
        headerCells.forEach(cell => {
            cell.style.backgroundColor = color;
        });
    }
    // -------------------------
    // تحميل اللون المحفوظ
    // -------------------------
    let savedColor = localStorage.getItem('highlightColor') || '#ffcc00';
    if (colorPicker) {
        colorPicker.value = savedColor;
        applyHighlightColor(savedColor);
    }
    // -------------------------
    // حدث تغيير اللون
    // -------------------------
    if (colorPicker) {
        colorPicker.addEventListener('input', function () {
            const selectedColor = this.value;
            localStorage.setItem('highlightColor', selectedColor);
            applyHighlightColor(selectedColor);
        });
    }
    const table = document.getElementById("mainPreviewTable");
    const invoiceContainer = document.getElementById("invoiceHeaderContainer");
    const leftDiv = document.getElementById("leftDiv");
    const rightDiv = document.getElementById("rightDiv");
    const twoColsContainer = document.getElementById("twoColsContainer");
    const leftCol = document.getElementById("leftCol");
    const rightCol = document.getElementById("rightCol");

    // -------------------------
    // استرجاع القيم السابقة
    // -------------------------
    for (let key in checkboxes) {
        const saved = localStorage.getItem(key) === 'true';
        checkboxes[key].checked = saved;
    }

    // -------------------------
    // تطبيق الإعدادات بعد التحميل
    // -------------------------
   

    if(checkboxes.toggleBorders.checked && table) {
        table.classList.add("table-bordered");
    }

    if(checkboxes.swapHeader.checked && invoiceContainer && leftDiv && rightDiv) {
        invoiceContainer.insertBefore(rightDiv, leftDiv);
    }

    if(checkboxes.swapCols.checked && twoColsContainer && leftCol && rightCol) {
        twoColsContainer.insertBefore(rightCol, leftCol);
    }

    // -------------------------
    // أحداث التغيير وحفظ القيمة
    // -------------------------


    checkboxes.toggleBorders.addEventListener('change', function() {
        localStorage.setItem('toggleBorders', this.checked);
        if(table) {
            this.checked ? table.classList.add("table-bordered") : table.classList.remove("table-bordered");
        }
    });

    checkboxes.swapHeader.addEventListener('change', function() {
        localStorage.setItem('swapHeader', this.checked);
        if(invoiceContainer && leftDiv && rightDiv) {
            if(this.checked) invoiceContainer.insertBefore(rightDiv, leftDiv);
            else invoiceContainer.insertBefore(leftDiv, rightDiv);
        }
    });

    checkboxes.swapCols.addEventListener('change', function() {
        localStorage.setItem('swapCols', this.checked);
        if(twoColsContainer && leftCol && rightCol) {
            if(this.checked) twoColsContainer.insertBefore(rightCol, leftCol);
            else twoColsContainer.insertBefore(leftCol, rightCol);
        }
    });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    tinymce.init({
        selector: '#header_text',
        setup: function(editor) {
            // تحديث المعاينة مباشرة عند أي تغيير
            editor.on('keyup change input', function() {
                const html = editor.getContent();
                $('#invoiceModal #header_preview').html(html);
            });

            // عند فتح المودال نحدث المعاينة أيضًا
            $('#invoiceModal').on('shown.bs.modal', function() {
                const html = editor.getContent();
                $('#invoiceModal #header_preview').html(html);
            });
        }
    });
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    tinymce.init({
        selector: '#footer_text',
        setup: function(editor) {
            // تحديث المعاينة مباشرة عند أي تغيير
            editor.on('keyup change input', function() {
                const html = editor.getContent();
                $('#invoiceModal #footer_preview').html(html);
            });

            // عند فتح المودال نحدث المعاينة أيضًا
            $('#invoiceModal').on('shown.bs.modal', function() {
                const html = editor.getContent();
                $('#invoiceModal #footer_preview').html(html);
            });
        }
    });
});


$(document).on('ifChanged', 'input[data-target^="preview-"]', function() {
    const target = $(this).data('target');
    const isChecked = $(this).is(':checked');
    const header = $(`#col-${target}`);
    const cells = $(`[data-col="${target}"]`);
    
    if (isChecked) {
        header.removeClass('hide');
        cells.removeClass('hide');
    } else {
        header.addClass('hide');
        cells.addClass('hide');
    }
});

</script>


  <script>
  document.addEventListener('DOMContentLoaded', function () {
      const submitBtn = document.querySelector('button[type="submit"]');
      if (!submitBtn) return;

      // القائمة الكاملة للعناصر والأقسام التي نريد حفظ إحداثياتها
      const trackedElementIds = [
          'header-section',
          'preview-logo',
          'preview-business-name',
          'preview-location-name',
          'address_bar',
          'contact_bar',
          'contact-invoice-section',
          'preview_customer_label',
          'preview-customer-name',
          'preview_client_id_label',
          'preview-client-id',
          'preview_invoice_no_prefix',
          'preview-invoice-number',
          'preview_date_label',
          'preview-invoice-date',
          'preview-total-amount',
          'preview-subtotal',
          'preview-total-in-words',
          'product-table-section',
          'footer-section',
          'totals-section',
          'preview-barcode',
          'preview-qr-code',
          'preview_paid_label',
          'preview_due_date_label',
          'preview_total_due_label',
          'preview_discount_label',
          'preview_sub_total_label',
          'preview-total-amount',
          'preview_total_label',
          'preview-total-in-words',
      ];

      submitBtn.addEventListener('click', function (e) {
          const positions = {};
          const tableColumns = {};

          trackedElementIds.forEach(id => {
              // 1. ابحث أولًا باستخدام id (للعناصر الفردية)
              let el = document.getElementById(id);

              // 2. إذا لم يُوجد، ابحث كقسم باستخدام data-section-id
              if (!el) {
                  el = document.querySelector(`[data-section-id="${id}"]`);
              }

              // 3. إذا لم يوجد العنصر إطلاقًا، تخطّه
              if (!el || !el.offsetParent) {
                  return;
              }

              // 4. تأكد من أنه مرئي
              const computedStyle = window.getComputedStyle(el);
              if (computedStyle.display === 'none' || computedStyle.visibility === 'hidden') {
                  return;
              }

              // 5. احسب الموضع بالنسبة لحاوية التصميم
              const container = document.getElementById('invoice-preview-area');
              if (!container) {
                  console.error('❌ #invoice-preview-area not found!');
                  return;
              }
              const containerRect = container.getBoundingClientRect();
              const rect = el.getBoundingClientRect();

              const x = Math.round(rect.left - containerRect.left);
              const y = Math.round(rect.top - containerRect.top);
              const width = Math.round(rect.width);
              const height = Math.round(rect.height);

              // 6. احفظ فقط إذا كان له حجم فعلي
              if (width > 0 && height > 0) {
                  positions[id] = [x, y, width, height]; // مصفوفة كما في تصميمك السابق
              }
          });



          const tableHeaders = document.querySelectorAll('#mainPreviewTable thead tr th');
        const visibleColumns = [];
        
        tableHeaders.forEach((th, index) => {
            if (!th.classList.contains('hide') && th.offsetParent !== null) {
                const computedStyle = window.getComputedStyle(th);
                if (computedStyle.display !== 'none' && computedStyle.visibility !== 'hidden') {
                    visibleColumns.push({
                        id: th.id,
                        text: th.textContent.trim(),
                        index: index
                    });
                }
            }
        });

        // حفظ ترتيب الأعمدة المرئية فقط
        tableColumns.visible_columns = visibleColumns;
        tableColumns.all_columns_order = Array.from(tableHeaders).map(th => th.id);

        // 3. حفظ كل البيانات في الحقل المخفي
        const hiddenInput = document.getElementById('elements_positions');
        if (hiddenInput) {
            const allData = {
                positions: positions,
                table_columns: tableColumns
            };
            hiddenInput.value = JSON.stringify(allData);
            console.log('📦 Saved data:', allData);
        }
      });
  });
  
  </script>
  <script>
// عند الضغط على زر الحفظ، قم بتحديث الحقل المخفي قبل الإرسال
document.querySelector('button[type="submit"]').addEventListener('click', function(e) {
    // تأكد من أن الدالة موجودة
    if (typeof saveFullState === 'function') {
        saveFullState();
    }
    
    // تأكد من أن القيمة تم حفظها في الحقل المخفي
    const hiddenInput = document.getElementById('design_state');
    if (hiddenInput && (!hiddenInput.value || hiddenInput.value === '{}')) {
        console.warn('design_state فارغ أو غير مهيأ');
    }
});
</script>
@endsection