@extends('parts.container')

@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/src/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/light/table/datatable/dt-global_style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/dark/table/datatable/dt-global_style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/light/components/modal.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/dark/components/modal.css') }}" />
@endsection

@section('content')
<div class="row layout-top-spacing">
    <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
        <div class="widget-content widget-content-area br-8">
            <div class="text-center">
                <button type="button" class="btn btn-primary mb-2 mr-2" id="btnAdd">Add Country</button>
            </div>

            <div class="table-responsive">
                <table id="countriesTable" class="table style-3 dt-table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Dial Code</th>
                            <th>Name</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="countryModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="countryModalLabel">Add Country</h5>
      </div>
      <div class="modal-body">
        <form id="countryForm">
            <input type="hidden" id="country_id" />
            <div class="form-group">
                <label>Code</label>
                <input type="text" class="form-control" id="code" placeholder="KE" maxlength="3" required />
            </div>
            <div class="form-group">
                <label>Dial Code</label>
                <input type="text" class="form-control" id="dial_code" placeholder="254" maxlength="6" required />
                <small class="text-muted">Digits only, e.g. 254 for Kenya</small>
            </div>
            <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control" id="name" placeholder="Kenya" required />
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="btnSave">Save</button>
      </div>
    </div>
  </div>
  </div>
@endsection

@section('scripts')
<script src="{{ asset('vendor/src/plugins/src/table/datatable/datatables.js') }}"></script>
<script>
let table = null;

function loadCountries(){
  fetch('/admin/countries/list').then(r=>r.json()).then(resp=>{
    if(!resp.success) throw new Error('Failed to load countries');
    const data = resp.data || [];
    if(!table){
      table = $('#countriesTable').DataTable({
        data,
        columns: [
          { data: 'code' },
          { data: 'dial_code' },
          { data: 'name' },
          { data: null, orderable:false, searchable:false, render: function(row){
              const item = row;
              const safe = encodeURIComponent(JSON.stringify(item));
              return `
                <button class="btn btn-primary btn-sm" onclick='onEdit(JSON.parse(decodeURIComponent("${safe}")))'>Edit</button>
                <button class="btn btn-danger btn-sm" onclick='onDelete(${item.id})'>Delete</button>
              `;
            }
          }
        ]
      });
    }else{
      table.clear(); table.rows.add(data); table.draw();
    }
  }).catch(e=>alert(e.message));
}

function resetForm(){
  document.getElementById('country_id').value = '';
  document.getElementById('code').value = '';
  document.getElementById('dial_code').value = '';
  document.getElementById('name').value = '';
}

function onEdit(item){
  document.getElementById('countryModalLabel').innerText = 'Edit Country';
  document.getElementById('country_id').value = item.id;
  document.getElementById('code').value = item.code || '';
  document.getElementById('dial_code').value = item.dial_code || '';
  document.getElementById('name').value = item.name || '';
  $('#countryModal').modal('show');
}

function onDelete(id){
  if(!confirm('Delete this country?')) return;
  fetch(`/admin/countries/${id}/delete`, { method: 'POST', headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' } })
    .then(r=>r.json()).then(resp=>{ if(!resp.success) throw new Error(resp.message||'Delete failed'); loadCountries(); })
    .catch(e=>alert(e.message));
}

document.getElementById('btnAdd').addEventListener('click', ()=>{ resetForm(); document.getElementById('countryModalLabel').innerText = 'Add Country'; $('#countryModal').modal('show'); });
document.getElementById('btnSave').addEventListener('click', ()=>{
  const payload = {
    code: document.getElementById('code').value.trim(),
    dial_code: document.getElementById('dial_code').value.trim(),
    name: document.getElementById('name').value.trim()
  };
  const id = document.getElementById('country_id').value;
  const url = id ? `/admin/countries/${id}` : '/admin/countries';
  const method = id ? 'PUT' : 'POST';
  fetch(url, { method, headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }, body: JSON.stringify(payload) })
    .then(r=>r.json()).then(resp=>{ if(!resp.success) throw new Error(resp.message||'Save failed'); $('#countryModal').modal('hide'); loadCountries(); })
    .catch(e=>alert(e.message));
});

loadCountries();
</script>
@endsection