
<div
  x-data="insurerPolicy()"
  class="box mb-0"
>
  <div class="box-header">
    <h5 class="box-title">Broj</h5>
  </div>
  <div class="box-body pb-2">

    
    <div class="mb-4">
      <label for="insurer_select" class="block text-sm font-medium text-gray-700">
        Izaberi osiguravatelja
      </label>
      <select
        id="insurer_select"
        x-model="insurerId"
        @change="fetchPolicies()"
        class="mt-1 block w-full py-2 px-3 ti-form-select"
      >
        <option value="">— Izaberi osiguravatelja —</option>
        <?php $__currentLoopData = $insurers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $insurer): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
          <option value="<?php echo e($insurer->id); ?>">
            <?php echo e($insurer->short_name); ?>

          </option>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </select>
    </div>

    
    <div class="mb-4">
      <label for="policy_select" class="block text-sm font-medium text-gray-700">
        Izaberi policu
      </label>
      <select
        id="policy_select"
        x-model="policyId"
        :disabled="policies.length === 0"
        class="mt-1 block w-full py-2 px-3 ti-form-select"
      >
        <template x-if="insurerId === ''">
          <option value="">Prvo izaberite osiguravatelja</option>
        </template>
        <template x-if="insurerId !== '' && policies.length === 0">
          <option value="">Učitavanje polica...</option>
        </template>
        <template x-for="policy in policies" :key="policy.id">
          <option :value="policy.id" x-text="policy.name"></option>
        </template>
      </select>
    </div>

  </div>
</div>

<script>
  function insurerPolicy() {
    return {
      insurerId: '',
      policyId: '',
      policies: [],

      async fetchPolicies() {
        this.policies = []
        this.policyId  = ''

        if (! this.insurerId) {
          return;
        }

        try {
          const res = await fetch(
            `/insurers/${this.insurerId}/policies`,
            {
              headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document
                  .querySelector('meta[name="csrf-token"]')
                  .getAttribute('content'),
                'Accept': 'application/json'
              }
            }
          );

          if (! res.ok) throw new Error('Network error');

          this.policies = await res.json();
        } catch (e) {
          console.error(e);
          this.policies = [];
          // Optionally set a flag and show an error message in the UI
        }
      }
    }
  }
</script><?php /**PATH C:\laragon\www\policypilot\resources\views/backend/insurance/insurance-policies/boxes/insurer-chices.blade.php ENDPATH**/ ?>