@extends('backend.layout.master-tailwind')
@section('title', __('All Banners'))

@section('admin_styles')
<x-media.css />
<style>
#addBannerModal, #editBannerModal {
    border: none;
    border-radius: 12px;
    padding: 0;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    width: 100%;
    max-width: 500px;
}
#addBannerModal::backdrop, #editBannerModal::backdrop { background: rgba(0,0,0,.45); }
.attachment-preview {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.attachment-preview img {
    max-width: 100%;
    height: auto;
    display: block;
}
.xsel-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; cursor: pointer; height: 38px; padding: 0 10px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 7px; color: var(--text); font-size: 13px;
    font-family: inherit; text-align: left; box-sizing: border-box;
}
.xsel-btn:hover { border-color: var(--border-strong); }
.xsel-btn .icon { flex: none; color: var(--text-3); }
@media (max-width: 640px) {
    .tbl .col-category,
    .tbl .col-project { display: none; }
}
</style>
@endsection

@section('content')
<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Mobile App Banners') }}</h1>
      <p class="page-sub">{{ __('Manage promotional banners for mobile app') }}</p>
    </div>
    <div class="page-actions">
      <button type="button" class="btn primary sm" onclick="document.getElementById('addBannerModal').showModal()">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
        {{ __('Add Banner') }}
      </button>
    </div>
  </div>

  <div class="card" style="padding:0;overflow:hidden">

    @can('banner-bulk-delete')
    <div id="bulk-toolbar" style="display:none;padding:10px 16px;border-bottom:1px solid var(--border);background:color-mix(in oklch,var(--danger,#ef4444) 5%,transparent);align-items:center;gap:10px">
      <span id="bulk-count" style="font-size:12px;color:var(--text-2);flex:1"></span>
      <button type="button" id="bulk-delete-btn" class="btn sm" style="background:color-mix(in oklch,var(--danger,#ef4444) 10%,transparent);color:var(--danger,#ef4444);border:1px solid color-mix(in oklch,var(--danger,#ef4444) 30%,transparent)">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
        {{ __('Delete Selected') }}
      </button>
      <form id="bulk-delete-form" action="{{ route('admin.mobile.app.banner.bulk.action') }}" method="POST" style="display:none">
        @csrf
        <div id="bulk-inputs"></div>
      </form>
    </div>
    @endcan

    <div style="overflow-x:auto">
    <table class="tbl">
      <thead>
        <tr>
          @can('banner-bulk-delete')
          <th style="width:40px;padding-left:16px">
            <input type="checkbox" id="check-all" style="accent-color:var(--accent,#6366f1);width:14px;height:14px;cursor:pointer">
          </th>
          @endcan
          <th>{{ __('Image') }}</th>
          <th class="col-category">{{ __('Category') }}</th>
          <th class="col-project">{{ __('Project') }}</th>
          <th>{{ __('Status') }}</th>
          <th>{{ __('Actions') }}</th>
        </tr>
      </thead>
      <tbody>
        @forelse($banners as $data)
        <tr>
          @can('banner-bulk-delete')
          <td style="padding-left:16px">
            <input type="checkbox" class="row-check" value="{{ $data->id }}" style="accent-color:var(--accent,#6366f1);width:14px;height:14px;cursor:pointer">
          </td>
          @endcan
          <td style="padding:8px">
            @php $img = get_attachment_image_by_id($data->image); @endphp
            @if($img)
              <img src="{{ $img['img_url'] }}" style="max-width:100px;max-height:60px;object-fit:cover;border-radius:6px">
            @else
              <span style="color:var(--text-3);font-size:12px">{{ __('(no image)') }}</span>
            @endif
          </td>
          <td class="col-category" style="font-size:13px">{{ optional($data->category)->category }}</td>
          <td class="col-project" style="font-size:13px">{{ optional($data->project)->title }}</td>
          <td>
            <span class="tag" style="background:{{ $data->status ? 'color-mix(in oklch,var(--success,#22c55e) 12%,transparent)' : 'color-mix(in oklch,var(--text-3) 30%,transparent)' }};color:{{ $data->status ? 'var(--success,#22c55e)' : 'var(--text-3)' }};border-color:{{ $data->status ? 'color-mix(in oklch,var(--success,#22c55e) 30%,transparent)' : 'color-mix(in oklch,var(--text-3) 30%,transparent)' }}">{{ $data->status ? __('Published') : __('Draft') }}</span>
          </td>
          <td>
            <div style="display:flex;gap:6px;align-items:center">
              <button type="button" class="icon-btn edit-banner-btn" title="{{ __('Edit') }}" data-id="{{ $data->id }}" data-image="{{ $data->image }}" data-image_url="{{ $img['img_url'] ?? '' }}" data-category_id="{{ $data->category_id }}" data-project_id="{{ $data->project_id }}" data-status="{{ $data->status }}">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
              </button>
              <form action="{{ route('admin.mobile.app.banner.delete', $data->id) }}" method="POST" class="banner-delete-form" style="display:inline">
                @csrf
                <button type="button" class="icon-btn delete-banner-btn" title="{{ __('Delete') }}" style="color:var(--danger,#ef4444)">
                  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
                </button>
              </form>
            </div>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="6" style="text-align:center;color:var(--text-3);padding:36px;font-size:13px">{{ __('No banners found') }}</td>
        </tr>
        @endforelse
      </tbody>
    </table>
    </div>
  </div>
</div>

{{-- Add Banner Modal --}}
<dialog id="addBannerModal">
  <div class="dialog-head">
    {{ __('Add New Banner') }}
    <button type="button" class="icon-btn" onclick="document.getElementById('addBannerModal').close()">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </button>
  </div>
  <form action="{{ route('admin.mobile.app.banner.settings') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="dialog-body">
      <div>
        <label class="field-label">{{ __('Image') }}</label>
        <div style="display:flex;flex-direction:column;gap:8px">
          <div class="img-wrap" style="min-height:60px"></div>
          <input type="hidden" name="image" class="add-image-input">
          <button type="button" class="btn primary sm media_upload_form_btn" id="add-media-btn" style="width:fit-content" data-btntitle="{{ __('Select Image') }}" data-modaltitle="{{ __('Upload Image') }}" data-imgid="">
            {{ __('Upload Image') }}
          </button>
          <span style="font-size:11px;color:var(--text-3)">{{ __('Recommended size: 1920×1080') }}</span>
        </div>
      </div>
      <div>
        <label class="field-label">{{ __('Category') }}</label>
        <select name="category_id" class="input wide add-category-select" style="height:38px;appearance:auto">
          <option value="">{{ __('Select Category') }}</option>
          @foreach($categories as $category)
            <option value="{{ $category->id }}">{{ $category->category }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="field-label">{{ __('Project') }}</label>
        <select name="project_id" class="input wide add-project-select" style="height:38px;appearance:auto">
          <option value="">{{ __('Select Project') }}</option>
        </select>
      </div>
      <div>
        <label class="field-label">{{ __('Status') }}</label>
        <input type="hidden" name="status" id="val-add-status" value="1">
        <div class="pop-wrap" style="display:block;width:100%">
          <button type="button" class="xsel-btn" data-pop="pop-add-status">
            <span id="lbl-add-status">{{ __('Published') }}</span>
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
          </button>
          <div class="pop" id="pop-add-status" style="right:0;left:auto;width:auto">
            <div class="pop-section">
              <button type="button" class="menu-item xsel-opt" data-value="1">{{ __('Published') }}</button>
              <button type="button" class="menu-item xsel-opt" data-value="0">{{ __('Draft') }}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-foot">
      <button type="button" class="btn ghost sm" onclick="document.getElementById('addBannerModal').close()">{{ __('Cancel') }}</button>
      <button type="submit" class="btn primary sm">{{ __('Add Banner') }}</button>
    </div>
  </form>
</dialog>

{{-- Edit Banner Modal --}}
<dialog id="editBannerModal">
  <div class="dialog-head">
    {{ __('Edit Banner') }}
    <button type="button" class="icon-btn" onclick="document.getElementById('editBannerModal').close()">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </button>
  </div>
  <form action="{{ route('admin.mobile.app.banner.edit') }}" method="POST" enctype="multipart/form-data" id="editBannerForm">
    @csrf
    <input type="hidden" name="id" id="banner-id">
    <div class="dialog-body">
      <div>
        <label class="field-label">{{ __('Image') }}</label>
        <div style="display:flex;flex-direction:column;gap:8px">
          <div class="img-wrap" style="min-height:60px"></div>
          <input type="hidden" name="image" id="edit-image-input">
          <button type="button" class="btn primary sm media_upload_form_btn" id="edit-media-btn" style="width:fit-content" data-btntitle="{{ __('Select Image') }}" data-modaltitle="{{ __('Upload Image') }}" data-imgid="">
            {{ __('Upload Image') }}
          </button>
          <span style="font-size:11px;color:var(--text-3)">{{ __('Recommended size: 1920×1080') }}</span>
        </div>
      </div>
      <div>
        <label class="field-label">{{ __('Category') }}</label>
        <select name="category_id" id="edit-category-select" class="input wide" style="height:38px;appearance:auto">
          <option value="">{{ __('Select Category') }}</option>
          @foreach($categories as $category)
            <option value="{{ $category->id }}">{{ $category->category }}</option>
          @endforeach
        </select>
      </div>
      <div>
        <label class="field-label">{{ __('Project') }}</label>
        <select name="project_id" id="edit-project-select" class="input wide" style="height:38px;appearance:auto">
          <option value="">{{ __('Select Project') }}</option>
        </select>
      </div>
      <div>
        <label class="field-label">{{ __('Status') }}</label>
        <input type="hidden" name="status" id="val-edit-status" value="1">
        <div class="pop-wrap" style="display:block;width:100%">
          <button type="button" class="xsel-btn" data-pop="pop-edit-status">
            <span id="lbl-edit-status">{{ __('Published') }}</span>
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
          </button>
          <div class="pop" id="pop-edit-status" style="right:0;left:auto;width:auto">
            <div class="pop-section">
              <button type="button" class="menu-item xsel-opt" data-value="1">{{ __('Published') }}</button>
              <button type="button" class="menu-item xsel-opt" data-value="0">{{ __('Draft') }}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-foot">
      <button type="button" class="btn ghost sm" onclick="document.getElementById('editBannerModal').close()">{{ __('Cancel') }}</button>
      <button type="submit" class="btn primary sm">{{ __('Save Changes') }}</button>
    </div>
  </form>
</dialog>

<x-media.markup />
@endsection

@section('script')
<x-media.js />
<script>
(function ($) {
  'use strict';

  // Bulk delete
  var checkAll    = document.getElementById('check-all');
  var bulkToolbar = document.getElementById('bulk-toolbar');
  var bulkCount   = document.getElementById('bulk-count');
  var bulkDeleteBtn  = document.getElementById('bulk-delete-btn');
  var bulkDeleteForm = document.getElementById('bulk-delete-form');
  var bulkInputs     = document.getElementById('bulk-inputs');

  function getChecked() {
    return Array.from(document.querySelectorAll('.row-check:checked'));
  }

  function updateBulkToolbar() {
    if (!bulkToolbar) return;
    var checked = getChecked();
    if (checked.length > 0) {
      bulkToolbar.style.display = 'flex';
      bulkCount.textContent = checked.length + ' {{ __("item(s) selected") }}';
    } else {
      bulkToolbar.style.display = 'none';
    }
  }

  if (checkAll) {
    checkAll.addEventListener('change', function () {
      document.querySelectorAll('.row-check').forEach(function (cb) {
        cb.checked = checkAll.checked;
      });
      updateBulkToolbar();
    });
  }

  document.querySelectorAll('.row-check').forEach(function (cb) {
    cb.addEventListener('change', function () {
      if (checkAll && !this.checked) checkAll.checked = false;
      updateBulkToolbar();
    });
  });

  if (bulkDeleteBtn) {
    bulkDeleteBtn.addEventListener('click', function () {
      var checked = getChecked();
      if (!checked.length) return;
      Swal.fire({
        title: '{{ __("Delete Selected?") }}',
        text: '{{ __("This action cannot be undone.") }}',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: '{{ __("Delete") }}',
        confirmButtonColor: '#ef4444',
        cancelButtonText: '{{ __("Cancel") }}'
      }).then(function (result) {
        if (result.isConfirmed) {
          bulkInputs.innerHTML = '';
          checked.forEach(function (cb) {
            var inp = document.createElement('input');
            inp.type = 'hidden';
            inp.name = 'ids[]';
            inp.value = cb.value;
            bulkInputs.appendChild(inp);
          });
          bulkDeleteForm.submit();
        }
      });
    });
  }

  // Single delete
  document.querySelectorAll('.delete-banner-btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var form = this.closest('.banner-delete-form');
      Swal.fire({
        title: '{{ __("Delete Banner?") }}',
        text: '{{ __("This action cannot be undone.") }}',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: '{{ __("Delete") }}',
        confirmButtonColor: '#ef4444',
        cancelButtonText: '{{ __("Cancel") }}'
      }).then(function (result) {
        if (result.isConfirmed) form.submit();
      });
    });
  });

  // Add form - category change
  $(document).on('change', '.add-category-select', function() {
    var category_id = $(this).val();
    if (!category_id) {
      $('.add-project-select').html('<option value="">{{ __('Select Project') }}</option>');
      return;
    }
    $.ajax({
      url: "{{ route('admin.mobile.app.banner.project.by.category') }}",
      type: "POST",
      data: {
        _token: "{{ csrf_token() }}",
        category_id: category_id
      },
      success: function(data) {
        var select = $('.add-project-select');
        select.empty();
        select.append('<option value="">{{ __('Select Project') }}</option>');
        $.each(data, function(key, value) {
          select.append('<option value="' + value.id + '">' + value.title + '</option>');
        });
      }
    });
  });

  // Edit form - load data
  document.querySelectorAll('.edit-banner-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var id = this.dataset.id;
      var image = this.dataset.image;
      var image_url = this.dataset.image_url;
      var category_id = this.dataset.category_id;
      var project_id = this.dataset.project_id;
      var status = this.dataset.status;

      document.getElementById('banner-id').value = id;
      document.getElementById('edit-category-select').value = category_id;

      // Update status pop
      var statusLabel = status == '1' ? '{{ __('Published') }}' : '{{ __('Draft') }}';
      document.getElementById('val-edit-status').value = status;
      document.getElementById('lbl-edit-status').textContent = statusLabel;

      // Pre-fill image
      var editMediaBtn = document.getElementById('edit-media-btn');
      var imgWrap = editMediaBtn.closest('div[style]').querySelector('.img-wrap');
      editMediaBtn.dataset.imgid = image || '';
      document.getElementById('edit-image-input').value = image || '';
      if (image && image_url) {
        imgWrap.innerHTML = '<div class="attachment-preview"><img src="' + image_url + '" style="max-width:100%;border-radius:6px"></div>';
        editMediaBtn.textContent = '{{ __('Change Image') }}';
      } else {
        imgWrap.innerHTML = '';
        editMediaBtn.textContent = '{{ __('Upload Image') }}';
      }

      // Fetch projects
      $.ajax({
        url: "{{ route('admin.mobile.app.banner.project.by.category') }}",
        type: "POST",
        data: {
          _token: "{{ csrf_token() }}",
          category_id: category_id
        },
        success: function(data) {
          var select = document.getElementById('edit-project-select');
          select.innerHTML = '<option value="">{{ __('Select Project') }}</option>';
          $.each(data, function(key, value) {
            var opt = document.createElement('option');
            opt.value = value.id;
            opt.textContent = value.title;
            if (value.id == project_id) opt.selected = true;
            select.appendChild(opt);
          });
        }
      });

      document.getElementById('editBannerModal').showModal();
    });
  });

  // Edit form - category change
  $(document).on('change', '#edit-category-select', function() {
    var category_id = $(this).val();
    if (!category_id) {
      $('#edit-project-select').html('<option value="">{{ __('Select Project') }}</option>');
      return;
    }
    $.ajax({
      url: "{{ route('admin.mobile.app.banner.project.by.category') }}",
      type: "POST",
      data: {
        _token: "{{ csrf_token() }}",
        category_id: category_id
      },
      success: function(data) {
        var select = $('#edit-project-select');
        select.empty();
        select.append('<option value="">{{ __('Select Project') }}</option>');
        $.each(data, function(key, value) {
          select.append('<option value="' + value.id + '">' + value.title + '</option>');
        });
      }
    });
  });

  // Status pop handlers
  ['add', 'edit'].forEach(function (pfx) {
    document.querySelectorAll('#pop-' + pfx + '-status .xsel-opt').forEach(function (opt) {
      opt.addEventListener('click', function () {
        document.getElementById('lbl-' + pfx + '-status').textContent = opt.textContent.trim();
        document.getElementById('val-' + pfx + '-status').value = opt.dataset.value;
        document.getElementById('pop-' + pfx + '-status').classList.remove('open');
      });
    });
  });

})(jQuery);
</script>
@endsection