@include('admin.layouts.header')
@include('admin.layouts.sidebar')

<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
  /* === Base Styles === */
  *, *::before, *::after { box-sizing: border-box; }

  .btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 10px 20px;
    transition: all .3s;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn:disabled { cursor: not-allowed; opacity: 0.65; }
  .btn-primary { background-color:#6C63FF; color:#fff; }
  .btn-primary:hover { filter:brightness(.95); box-shadow:0 6px 18px rgba(108,99,255,.18); }

  .main-container {
    width:calc(100% - 280px);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-height:calc(100vh - 100px);
    padding:40px 20px;
  }
  .page-title { font-size:2.5rem; font-weight:700; color:#213b4a; margin-bottom:60px; }
  .page-note { margin-bottom: 18px; color: #6b7280; font-size: 1rem; font-style: italic; }

  /* === Form Controls === */
  .controls-row {
    display:flex;
    gap:18px;
    width:100%;
    max-width:1100px;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:18px;
  }
  .control { flex:1 1 220px; min-width:200px; text-align:left; }
  .control label { display:block; font-weight:600; margin-bottom:6px; }

  .custom-select-style {
    appearance:none;
    background:white;
    border:1px solid #d3d9df;
    padding:10px 14px;
    font-size:15px;
    border-radius:8px;
    width:100%;
  }
  .custom-select-style:disabled { background-color: #f3f4f6; color: #9ca3af; }

  /* === Table Card === */
  .table-card {
    width:100%;
    max-width:1100px;
    border-radius:10px;
    background:#fff;
    box-shadow:0 6px 20px rgba(35,47,63,.06);
    padding:18px;
    margin-top:12px;
  }

  /* Desktop grid layout: 4 columns */
  .conditions-grid {
    display:grid;
    grid-template-columns: 1fr 160px 1fr 160px;
    gap:12px 18px;
    align-items:center;
  }
  .conditions-grid .header {
    font-weight:700;
    padding:12px 8px;
    color:#2b3b45;
    text-align:left;
  }

  .condition-row {
    padding:12px 8px;
    border-top:1px solid #eef2f6;
    display:flex;
    align-items:center;
  }
  .condition-row span { text-align:left; flex:1; }

  /* Styles for radio buttons (from inline style) */
  .condition-row label { display: inline-flex; align-items: center; }
  .condition-row label:first-of-type { margin-right: 10px; }

  .controls-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:18px;
    gap:12px;
  }
  .notify-checkbox { display:flex; align-items:center; gap:8px; }

  /* === Loader (from inline style) === */
  .init-loader {
    position: fixed;
    z-index: 1050;
    top: 0;
    left: 0;
    background-color: black;
    width: 100%;
    opacity: 0.5;
    height: 100%;
    text-align: center;
  }
  .init-loader img { margin-top: 25%; }

  /* === Notification Messages === */
  #message-container {
    width: 100%;
    max-width: 1100px;
    margin-top: 10px;
  }
  .message {
    padding: 12px 18px;
    border-radius: 8px;
    font-weight: 500;
    text-align: left;
    margin-bottom: 10px;
  }
  .message.success { background-color: #e6f7eb; color: #1e854b; border: 1px solid #b7e4c7; }
  .message.error { background-color: #fde8e8; color: #c31f1f; border: 1px solid #f9c6c6; }


  /* === Responsive (tablet/mobile) === */
  .mobile-heading {
    display:none;
    font-weight:700;
    font-size:1.05rem;
    color:#2b3b45;
    margin:8px 0;
    padding:8px 0;
    border-bottom:1px solid #eef2f6;
  }

  @media (max-width:900px) {
    .main-container { width:100%; padding:20px 15px; }
    .controls-row { flex-direction:column; gap:14px; align-items:stretch; }
    .control { min-width:100%; }
    .conditions-grid .header { display:none; }
    .conditions-grid { display:flex; flex-direction:column; gap:6px; }
    .mobile-heading { display:block; }
    .applicant-mobile-heading { order: 0; }
    .applicant-cell { order: 1; }
    .coapplicant-mobile-heading { order: 2; }
    .coapplicant-cell { order: 3; }
    .condition-row { flex-wrap:wrap; gap:8px; }
    .controls-bottom { flex-direction:column; align-items:stretch; gap:14px; }
    .controls-bottom button { width:100%; }
  }

  @media (max-width:600px) {
    .page-title { font-size:1.8rem; }
    .custom-select-style, .select-sm { font-size:14px; padding:8px 10px; }
  }
</style>

<div class="main-container">
  <div class="page-title">Post Approval Digital Flow</div>

    @include('admin.product-feature.partials._flow_controls')

  <div class="init-loader" style="display: none;">
    <img src="/assets/front/img/loading.gif" alt="Loading...">
  </div>

  <div id="message-container"></div>

  <div class="table-card">
    <div class="conditions-grid">
      <!-- Desktop headers (visible only on wide screens) -->
      <div class="header">Applicant Conditions</div>
      <div class="header">Applicable</div>
      <div class="header">Co-applicant Conditions</div>
      <div class="header">Applicable</div>

      <!-- Mobile heading for Applicant (text provided) -->
      <div class="mobile-heading applicant-mobile-heading">Applicant Conditions</div>

      @php
          // Define your list of conditions
          $conditions = [
              ['label' => 'Vkyc', 'name' => 'vkyc'],
              ['label' => 'Payment', 'name' => 'payment'],
              ['label' => 'Mandate', 'name' => 'mandate'],
              ['label' => 'Loan Agreement', 'name' => 'loan_agreement'],
          ];
      @endphp

      @foreach ($conditions as $condition)
          @include('admin.product-feature.partials._condition-row', $condition)
      @endforeach

      <!-- Mobile heading for Co-applicant (text provided) -->
      <div class="mobile-heading coapplicant-mobile-heading">Co-applicant Conditions</div>
    </div>

    <div class="controls-bottom">
      <label class="notify-checkbox">
        <input id="show_to_advisor" type="checkbox"> Send Changes update to Advisor
      </label>

      <button id="save_rules" class="btn btn-primary">Save</button>
    </div>
  </div>
</div>

<script>
  $(function() {
    
    // --- Global Setup ---
    
    // Setup CSRF token for all AJAX requests
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    const $loader = $(".init-loader");
    const $messageContainer = $('#message-container');

    const subCategoryOptions = {
      "1": [
        { value: "Village cluster project", text: "Village cluster project" },
        { value: "Subsidy prepayment", text: "Subsidy prepayment" },
        { value: "Others", text: "Others" }
      ],
      "2": [
        { value: "Aatta Chakki", text: "Aatta Chakki" },
        { value: "Oil Expeller", text: "Oil Expeller" },
        { value: "Others", text: "Others" }
      ],
      "3": [
        { value: "School and University", text: "School and University" },
        { value: "Petrol Pump", text: "Petrol Pump" },
        { value: "Hotels and Restaurants", text: "Hotels and Restaurants" },
        { value: "Cold Storage", text: "Cold Storage" },
        { value: "Factories", text: "Factories" },
        { value: "Offices", text: "Offices" },
        { value: "Hospitals", text: "Hospitals" },
        { value: "Others", text: "Others" }
      ],
      "4": [] // No subcategory for value 4
    };

    const entityOptions = {
      "Individual": [
        { value: "Proprietorships", text: "Proprietorships" },
        { value: "Individual", text: "Individual" }
      ],
      "Non-individual": [
        { value: "Partnership Firm/LLP", text: "Partnership Firm/LLP" },
        { value: "HUF", text: "HUF" },
        { value: "Pvt .Ltd Co.", text: "Pvt .Ltd Co." },
        { value: "Public Ltd Co.", text: "Public Ltd Co." },
        { value: "Housing Society", text: "Housing Society" },
        { value: "Trust", text: "Trust" },
        { value: "Central/State Govt. Dpt. or Agency", text: "Central/State Govt. Dpt. or Agency" },
        { value: "Universities", text: "Universities" },
        { value: "Others", text: "Others" }
      ]
    };

    // --- Helper Functions ---

    function showLoader() { $loader.show(); }
    function hideLoader() { $loader.hide(); }

    /**
     * Shows a success or error message
     * @param {string} type - 'success' or 'error'
     * @param {string} text - The message to display
     */
    function showMessage(type, text) {
      $messageContainer.html(
        '<div class="message ' + type + '">' + text + '</div>'
      );
      // Auto-hide after 5 seconds
      setTimeout(() => { $messageContainer.empty(); }, 5000);
    }

    function updateSelectState($select, condition) {
      $select.prop('disabled', condition);
      if (condition) {
        $select.closest('.control').show(); // Show by default
      }
    }

    function populateSelect($select, options) {
      $select.empty().append('<option value="">Select</option>');
      if (options) {
        options.forEach(opt => {
          $select.append(`<option value="${opt.value}">${opt.text}</option>`);
        });
      }
    }

    // --- Population & State Functions ---

    function populateTypeEntity() {
      const customerType = $('#type_customer').val();
      const $entity = $('#type_entity');
      populateSelect($entity, entityOptions[customerType]);
      updateSelectState($entity, !customerType);
    }

    function populateSubCategory() {
      const solarFor = $('#solar_for').val();
      const $subCategory = $('#sub_category');
      const options = subCategoryOptions[solarFor];
      
      populateSelect($subCategory, options);
      updateSelectState($subCategory, !solarFor);

      // Special logic for "Housing Society" (value 4)
      if (solarFor === "4") {
        $subCategory.closest('.control').hide();
      } else {
        $subCategory.closest('.control').show();
      }
    }

    function resetRadiosToDefault() {
      $('input[name^="vkyc_"][value="1"]').prop('checked', true);
      $('input[name^="payment_"][value="1"]').prop('checked', true);
      $('input[name^="mandate_"][value="1"]').prop('checked', true);
      $('input[name^="loan_agreement_"][value="1"]').prop('checked', true);
    }

    // --- AJAX Functions ---

    function fetchExistingFlowData() {
      const lender_id = $('#lender_id').val();
      const type_customer = $('#type_customer').val();
      const type_entity = $('#type_entity').val();
      const solar_for = $('#solar_for').val();
      const sub_category = $('#sub_category').val();

      // Check if all required fields are filled
      const allFilled = lender_id && type_customer && type_entity && solar_for && 
                        (solar_for === "4" || sub_category); // Sub-category not needed if solar_for is 4

      if (allFilled) {
        showLoader();
        $.ajax({
          url: '/admin/product/get-post-approval-flow',
          type: 'post',
          data: {
            lender_id, type_customer, type_entity, solar_for, sub_category
          },
          success: function(response) {
            if (response && response.found) {
              // Update radio buttons
              $('input[name="vkyc_applicant"][value="' + response.vkyc_applicant + '"]').prop('checked', true);
              $('input[name="vkyc_coapplicant"][value="' + response.vkyc_coapplicant + '"]').prop('checked', true);
              $('input[name="payment_applicant"][value="' + response.payment_applicant + '"]').prop('checked', true);
              $('input[name="payment_coapplicant"][value="' + response.payment_coapplicant + '"]').prop('checked', true);
              $('input[name="mandate_applicant"][value="' + response.mandate_applicant + '"]').prop('checked', true);
              $('input[name="mandate_coapplicant"][value="' + response.mandate_coapplicant + '"]').prop('checked', true);
              $('input[name="loan_agreement_applicant"][value="' + response.loan_agreement_applicant + '"]').prop('checked',true);
              $('input[name="loan_agreement_coapplicant"][value="' + response.loan_agreement_coapplicant + '"]').prop('checked', true);
            } else {
              resetRadiosToDefault();
            }
            hideLoader();
          },
          error: function() {
            showMessage('error', 'Error fetching existing data.');
            hideLoader();
          }
        });
      }
    }

    function saveFlowData() {
      const missingFields = [];
      const lender_id = $('#lender_id').val();
      const lender_name = $('#lender_id option:selected').data('name');
      const type_customer = $('#type_customer').val();
      const type_entity = $('#type_entity').val();
      const solar_for = $('#solar_for').val();
      const sub_category = $('#sub_category').val();

      if (!lender_id) missingFields.push('Lender');
      if (!type_customer) missingFields.push('Type of Customer');
      if (!type_entity) missingFields.push('Type of Entity');
      if (!solar_for) missingFields.push('Solar financing for');
      if (solar_for !== "4" && !sub_category) missingFields.push('Sub-category of solar financing');

      if (missingFields.length > 0) {
        showMessage('error', 'Please select: ' + missingFields.join(', '));
        return;
      }

      showLoader();
      const data = {
        lender_id: lender_id,
        lender_name: lender_name,
        type_customer: type_customer,
        type_entity: type_entity,
        solar_for: solar_for,
        sub_category: sub_category,
        vkyc_applicant: $('input[name="vkyc_applicant"]:checked').val(),
        vkyc_coapplicant: $('input[name="vkyc_coapplicant"]:checked').val(),
        payment_applicant: $('input[name="payment_applicant"]:checked').val(),
        payment_coapplicant: $('input[name="payment_coapplicant"]:checked').val(),
        mandate_applicant: $('input[name="mandate_applicant"]:checked').val(),
        mandate_coapplicant: $('input[name="mandate_coapplicant"]:checked').val(),
        loan_agreement_applicant: $('input[name="loan_agreement_applicant"]:checked').val(),
        loan_agreement_coapplicant: $('input[name="loan_agreement_coapplicant"]:checked').val(),
        show_to_advisor: $('#show_to_advisor').is(':checked') ? 1 : 0,
      };

      $.ajax({
        url: '/admin/product/save-post-approval-flow',
        type: 'POST',
        data: data,
        success: function(response) {
          if(response.success) {
            showMessage('success', 'Saved successfully at ' + new Date().toLocaleTimeString());
          } else {
            showMessage('error', response.message || 'Error saving data.');
          }
          hideLoader();
        },
        error: function() {
          showMessage('error', 'Error saving data. Please try again.');
          hideLoader();
        }
      });
    }

    // --- Event Listeners ---

    $('#type_customer').on('change', function() {
      populateTypeEntity();
      $('#type_entity').val('');
      fetchExistingFlowData();
    });

    $('#solar_for').on('change', function() {
      populateSubCategory();
      $('#sub_category').val('');
      fetchExistingFlowData();
    });

    // Other dropdowns
    $('#lender_id, #type_entity, #sub_category').on('change', fetchExistingFlowData);

    // Save button
    $('#save_rules').on('click', saveFlowData);

    // --- Initialization ---
    
    // Run on page load
    populateTypeEntity();
    populateSubCategory();
  });
</script>

@include('admin.layouts.footer')