@extends('layouts.app')

@section('title', 'GSTIN Management')

@section('content')
  <div class="card mb-3">
    <div class="card-header">
      <div class="row flex-between-center">
        <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
          <h5 class="fs-9 mb-0 text-nowrap py-2 py-xl-0">GSTIN Management</h5>
        </div>
    <div class="col-8 col-sm-auto text-end ps-2">
          <div id="table-gstins-replace-element">
      @can('masters-business-partners-gstin-management.create')
      <button class="btn btn-falcon-default btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#gstinOffcanvas">
              <span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span>
              <span class="d-none d-sm-inline-block ms-1">New</span>
            </button>
      @endcan
            <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#gstinFilters">
              <span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span>
              <span class="d-none d-sm-inline-block ms-1">Filter</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="collapse" id="gstinFilters">
      <div class="card-body border-top fs-10">
        <div class="row g-3">
          <div class="col-md-3">
            <label class="form-label" for="filterSearch">Search</label>
            <input id="filterSearch" class="form-control" type="text" placeholder="GSTIN, Legal/Trade name, PAN">
          </div>
          <div class="col-md-2">
            <label class="form-label" for="filterPartyType">Party Type</label>
            <select id="filterPartyType" class="form-select">
              <option value="">All Types</option>
              <option value="VENDOR">Vendor</option>
              <option value="CUSTOMER">Customer</option>
            </select>
          </div>
          <div class="col-md-2">
            <label class="form-label" for="filterState">State</label>
            <select id="filterState" class="form-select">
              <option value="">All States</option>
            </select>
          </div>
          <div class="col-md-2">
            <label class="form-label" for="filterStatus">Status</label>
            <select id="filterStatus" class="form-select">
              <option value="">All Status</option>
              <option value="ACTIVE">Active</option>
              <option value="INACTIVE">Inactive</option>
              <option value="CANCELLED">Cancelled</option>
            </select>
          </div>
          <div class="col-md-2">
            <label class="form-label" for="filterDefault">Default</label>
            <select id="filterDefault" class="form-select">
              <option value="">All</option>
              <option value="1">Yes</option>
              <option value="0">No</option>
            </select>
          </div>
          <div class="col-md-1 d-flex align-items-end">
            <div class="d-grid gap-2 d-md-flex">
              <button id="applyGstinFilters" type="button" class="btn btn-primary btn-sm">Apply</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card-body p-0">
      <div class="table-responsive scrollbar">
        <table class="table table-sm table-striped fs-10 mb-0">
          <thead class="bg-200">
            <tr>
              <th>Party Type</th>
              <th>Party</th>
              <th>GSTIN</th>
              <th>Trade Name</th>
              <th>State</th>
              <th>City</th>
              <th>Contact Person</th>
              <th>Phone</th>
              <th>Status</th>
              @canany(['masters-business-partners-gstin-management.update','masters-business-partners-gstin-management.delete'])
              <th>Action</th>
              @else
              <th></th>
              @endcanany
            </tr>
          </thead>
          <tbody id="table-gstins-body">
            <tr>
              <td colspan="10" class="text-center py-4 text-muted">Use filters and actions above to manage GSTIN records</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div id="laravel_paginator" class="p-2"></div>
    </div>
  </div>

  <!-- Offcanvas Form -->
  <div class="offcanvas offcanvas-end" tabindex="-1" id="gstinOffcanvas" aria-labelledby="gstinOffcanvasLabel" style="width: 40%">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="gstinOffcanvasLabel">Add GSTIN</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>
    <div class="offcanvas-body">
      <div class="card">
        <div class="card-body">
          <form id="gstinForm">
            @csrf
            <input type="hidden" id="gstin_id" />
            <div class="row">
              <div class="col-md-6">
                <label class="form-label">Party Type <span class="text-danger">*</span></label>
                <select id="party_type" class="form-select form-select-sm" >
                  <option value="">Select Party Type</option>
                  <option value="VENDOR">Vendor</option>
                  <option value="CUSTOMER">Customer</option>
                </select>
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Party <span class="text-danger">*</span></label>
                <select id="party_id" class="form-select form-select-sm" >
                  <option value="">Select Party</option>
                </select>
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">GSTIN Number <span class="text-danger">*</span></label>
                <input id="gstin_number" class="form-control form-control-sm" type="text" maxlength="15" placeholder="15-char GSTIN"  style="text-transform: uppercase;">
                <div class="invalid-feedback"></div>
                <div class="form-text">Format: 22XXXXX1234X1Z5 (15 characters)</div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Trade Name <span class="text-danger">*</span></label>
                <input id="trade_name" class="form-control form-control-sm" type="text"  maxlength="255">
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Address Line 1 <span class="text-danger">*</span></label>
                <input id="address_line1" class="form-control form-control-sm" type="text"  maxlength="255">
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Address Line 2</label>
                <input id="address_line2" class="form-control form-control-sm" type="text" maxlength="255">
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">State <span class="text-danger">*</span></label>
                <select id="state_id" class="form-select form-select-sm" >
                  <option value="">-- Select State --</option>
                </select>
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">City <span class="text-danger">*</span></label>
                <input id="city" class="form-control form-control-sm" type="text"  maxlength="100">
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Pincode <span class="text-danger">*</span></label>
                <input id="pincode" class="form-control form-control-sm" type="text" maxlength="6" placeholder="123456"  pattern="[0-9]{6}">
                <div class="invalid-feedback"></div>
                <div class="form-text">6-digit Indian pincode</div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Country</label>
                <input id="country" class="form-control form-control-sm" type="text" value="India" maxlength="100">
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Contact Person <span class="text-danger">*</span></label>
                <input id="contact_person" class="form-control form-control-sm" type="text"  maxlength="255">
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Designation</label>
                <input id="designation" class="form-control form-control-sm" type="text" maxlength="100">
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Phone <span class="text-danger">*</span></label>
                <input id="phone" class="form-control form-control-sm" type="tel"  maxlength="20" pattern="[0-9+\-\s()]+">
                <div class="invalid-feedback"></div>
                <div class="form-text">Phone number with country code</div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Email</label>
                <input id="email" class="form-control form-control-sm" type="email" maxlength="255">
                <div class="invalid-feedback"></div>
              </div>
              <div class="col-md-6">
                <label class="form-label">Status</label>
                <select id="status" class="form-select form-select-sm">
                  <option value="ACTIVE">Active</option>
                  <option value="INACTIVE">Inactive</option>
                  <option value="CANCELLED">Cancelled</option>
                </select>
              </div>
            </div>
            <div class="d-flex justify-content-end mt-4">
              <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="offcanvas">Cancel</button>
              <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
<script>
  window.pageCaps = @json($caps ?? []);
  window.vendorCaps = @json($vendorCaps ?? []);
  window.customerCaps = @json($customerCaps ?? []);
</script>
<script src="{{ asset('assets/js/state-service.js') }}"></script>
<script src="{{ asset('assets/js/common/get_requested_data_global.js') }}"></script>
<script src="{{ asset('assets/js/custom/business_partners/gstin_management.js') }}"></script>
@endpush