<?php
/**
 * views/supplier/detail_supplier.php
 * Wrapper halaman detail supplier.
 */
if (!function_exists('decrypt_url')) {
	// Helper decrypt_url() diasumsikan sudah diload dari helper proyek.
}

$enc_id = $this->uri->segment(3);
$dec_id = 0;
if (!empty($enc_id)) {
	$try = @decrypt_url($enc_id);
	if (is_numeric($try)) {
		$dec_id = (int) $try;
	}
}

$supplier_id = isset($supplier_id) && $supplier_id ? (int) $supplier_id : $dec_id;
$supplier_nama = isset($supplier_nama) ? $supplier_nama : (isset($supplier['nama']) ? $supplier['nama'] : '');
?>
<style>
  #container-wrapper.supplier-detail-page {
    color: #1f2937;
    padding-top: 1.25rem;
  }

  .supplier-detail-page .supplier-detail-hero {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  .supplier-detail-page .supplier-detail-title {
    color: #111827;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.22;
    margin: 0;
  }

  .supplier-detail-page .supplier-detail-title .supplier-detail-title-accent {
    color: #2563eb;
  }

  .supplier-detail-page .supplier-detail-breadcrumb {
    background: transparent;
    margin: .4rem 0 0;
    padding: 0;
  }

  .supplier-detail-page .supplier-detail-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    overflow: hidden;
  }

  .supplier-detail-page .supplier-detail-toolbar {
    align-items: stretch;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    padding: 1rem;
  }

  .supplier-detail-page .supplier-detail-control {
    align-items: stretch;
    background: #fff;
    border: 1px solid #cfd7e6;
    border-radius: 10px;
    display: flex;
    flex: 1 1 170px;
    min-height: 44px;
    overflow: hidden;
  }

  .supplier-detail-page .supplier-detail-control-label {
    align-items: center;
    align-self: stretch;
    background: #3546a7;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 0 .85rem;
    text-transform: uppercase;
  }

  .supplier-detail-page .supplier-detail-control .form-control {
    background: #fff;
    border: 0;
    border-left: 1px solid #cfd7e6;
    border-radius: 0;
    box-shadow: none;
    color: #334155;
    height: 44px;
    min-width: 0;
    padding-left: .75rem;
  }

  .supplier-detail-page .supplier-detail-search {
    align-items: center;
    background: #f9fafb;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    display: flex;
    flex: 1 1 280px;
    gap: .7rem;
    min-height: 44px;
    overflow: hidden;
    padding: 0 .95rem;
  }

  .supplier-detail-page .supplier-detail-search i {
    color: #94a3b8;
    flex: 0 0 auto;
    font-size: 1.05rem;
  }

  .supplier-detail-page .supplier-detail-search .form-control {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #334155;
    height: 44px;
    min-width: 0;
    padding-left: 0;
  }

  .supplier-detail-page .supplier-detail-actions {
    display: flex;
    flex: 0 0 auto;
    gap: .7rem;
    margin-left: auto;
  }

  .supplier-detail-page .supplier-detail-btn {
    align-items: center;
    border: 0;
    border-radius: 10px !important;
    display: inline-flex;
    font-weight: 700;
    gap: .45rem;
    justify-content: center;
    min-height: 44px;
    padding: .5rem 1rem;
    white-space: nowrap;
  }

  .supplier-detail-page .supplier-detail-btn-clear {
    background: #f1f5f9;
    color: #475569;
  }

  .supplier-detail-page .supplier-detail-btn-clear:hover {
    background: #e2e8f0;
    color: #334155;
  }

  .supplier-detail-page .supplier-detail-content {
    padding: 0 1rem 1rem;
  }

  .supplier-detail-page .supplier-detail-table-wrap {
    overflow-x: auto;
  }

  .supplier-detail-page .supplier-detail-table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    min-width: 820px;
  }

  .supplier-detail-page .supplier-detail-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    color: #475569;
    font-size: .82rem;
    font-weight: 700;
    padding: .8rem .9rem;
    vertical-align: middle;
    white-space: nowrap;
  }

  .supplier-detail-page .supplier-detail-table tbody td {
    border-color: #eef2f7;
    color: #475569;
    padding: .85rem .9rem;
    vertical-align: middle;
  }

  .supplier-detail-page .supplier-detail-table tbody tr:hover td {
    background: #f8fbff;
  }

  .supplier-detail-page .supplier-detail-empty,
  .supplier-detail-page .supplier-detail-mobile-empty {
    color: #64748b;
    padding: 1.5rem !important;
    text-align: center;
  }

  .supplier-detail-page .supplier-detail-mobile {
    display: none;
  }

  .supplier-detail-page .supplier-detail-mobile-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    padding: 1rem;
  }

  .supplier-detail-page .supplier-detail-mobile-card + .supplier-detail-mobile-card {
    margin-top: .9rem;
  }

  .supplier-detail-page .supplier-detail-mobile-head {
    align-items: flex-start;
    display: flex;
    gap: .8rem;
  }

  .supplier-detail-page .supplier-detail-badge {
    align-items: center;
    background: linear-gradient(180deg, #3560d7, #2d50c5);
    border-radius: 12px;
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.1rem;
    font-weight: 800;
    height: 52px;
    justify-content: center;
    width: 52px;
    box-shadow: 0 10px 20px rgba(53, 96, 215, .22);
  }

  .supplier-detail-page .supplier-detail-mobile-title {
    color: #1d4ed8;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.32;
  }

  .supplier-detail-page .supplier-detail-mobile-meta {
    color: #64748b;
    font-size: .82rem;
    margin-top: .2rem;
  }

  .supplier-detail-page .supplier-detail-mobile-divider {
    border-top: 1px solid #e5e7eb;
    margin: .9rem 0 .85rem;
  }

  .supplier-detail-page .supplier-detail-mobile-rows {
    display: grid;
    gap: .65rem;
  }

  .supplier-detail-page .supplier-detail-mobile-row {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .supplier-detail-page .supplier-detail-mobile-row span {
    color: #64748b;
    font-weight: 700;
  }

  .supplier-detail-page .supplier-detail-mobile-row strong {
    color: #334155;
    font-weight: 700;
    text-align: right;
  }

  .supplier-detail-page .supplier-detail-mobile-summary {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: .9rem;
    padding: .9rem 1rem;
  }

  .supplier-detail-page .supplier-detail-mobile-summary div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
  }

  .supplier-detail-page .supplier-detail-mobile-summary span {
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .supplier-detail-page .supplier-detail-mobile-summary strong {
    color: #1d4ed8;
    font-size: .95rem;
  }

  .supplier-detail-page .supplier-detail-mobile-footer {
    color: #64748b;
    font-weight: 600;
    margin-top: .75rem;
  }

  @media (max-width: 767.98px) {
    #container-wrapper.supplier-detail-page {
      padding: 1rem .75rem 1.25rem;
    }

    .supplier-detail-page .supplier-detail-hero {
      margin-bottom: .85rem;
    }

    .supplier-detail-page .supplier-detail-title {
      font-size: 1.6rem;
      line-height: 1.18;
    }

    .supplier-detail-page .supplier-detail-breadcrumb {
      display: none;
    }

    .supplier-detail-page .supplier-detail-panel {
      border-radius: 20px;
    }

    .supplier-detail-page .supplier-detail-toolbar {
      gap: .7rem;
      padding: .9rem;
    }

    .supplier-detail-page .supplier-detail-control {
      background: transparent;
      border: 0;
      flex: 1 1 calc(50% - .35rem);
      flex-direction: column;
      gap: .35rem;
      min-height: auto;
      min-width: 0;
      overflow: visible;
    }

    .supplier-detail-page .supplier-detail-control-label {
      background: transparent;
      color: #334155;
      padding: 0;
      text-transform: none;
    }

    .supplier-detail-page .supplier-detail-control .form-control {
      border: 1px solid #cfd7e6;
      border-radius: 12px;
      height: 48px;
      padding-left: 1rem;
    }

    .supplier-detail-page .supplier-detail-search {
      flex: 1 1 100%;
      order: 3;
      border-radius: 12px;
      height: 48px;
    }

    .supplier-detail-page .supplier-detail-actions {
      flex: 1 1 100%;
      margin-left: 0;
      order: 4;
    }

    .supplier-detail-page .supplier-detail-actions .supplier-detail-btn {
      flex: 1 1 100%;
      min-width: 0;
      border-radius: 12px !important;
      min-height: 48px;
    }

    .supplier-detail-page .supplier-detail-content {
      padding: .85rem;
    }

    .supplier-detail-page .supplier-detail-table-wrap {
      display: none;
    }

    .supplier-detail-page .supplier-detail-mobile {
      display: block;
    }
  }

  @media (max-width: 420px) {
    .supplier-detail-page .supplier-detail-control {
      flex: 1 1 100%;
    }

    .supplier-detail-page .supplier-detail-mobile-summary {
      grid-template-columns: 1fr;
    }

    .supplier-detail-page .supplier-detail-mobile-row {
      grid-template-columns: 1fr;
    }

    .supplier-detail-page .supplier-detail-mobile-row strong {
      text-align: left;
    }
  }
</style>

<div class="container-fluid supplier-detail-page" id="container-wrapper">
	<div class="supplier-detail-hero">
		<div>
			<h1 class="supplier-detail-title">
				Detail Data Supplier<?= $supplier_nama ? ' <span class="supplier-detail-title-accent">&mdash; '.htmlspecialchars($supplier_nama, ENT_QUOTES, 'UTF-8').'</span>' : '' ?>
			</h1>
			<ol class="breadcrumb supplier-detail-breadcrumb">
				<li class="breadcrumb-item"><a href="./">Home</a></li>
				<li class="breadcrumb-item active" aria-current="page">Data Supplier</li>
			</ol>
		</div>
	</div>

	<div class="card supplier-detail-panel">
		<div class="card-header pb-0">
			<div class="supplier-detail-toolbar">
				<div class="supplier-detail-control">
					<span class="supplier-detail-control-label" for="limits">Limit</span>
					<select id="limits" name="limits" class="form-control custom-select" onchange="search_Supplier()">
						<option value="10">10</option>
						<option value="20" selected>20</option>
						<option value="50">50</option>
						<option value="100">100</option>
					</select>
				</div>

				<div class="supplier-detail-control">
					<span class="supplier-detail-control-label" for="sortBy">Sort</span>
					<select id="sortBy" class="form-control custom-select" onchange="search_Supplier()">
						<option value="ASC">ASC</option>
						<option value="DESC" selected>DESC</option>
					</select>
				</div>

				<div class="supplier-detail-search">
					<i class="fa fa-search"></i>
					<input type="text" id="keywords" class="form-control" placeholder="Cari item pembelian dari supplier ini" onkeyup="search_Supplier();" />
				</div>

				<div class="supplier-detail-actions">
					<button class="btn supplier-detail-btn supplier-detail-btn-clear clear" type="button">
						<i class="fa fa-times"></i> Clear
					</button>
				</div>
			</div>
		</div>

		<div class="post-list pt-0" id="dataSupplier">
			<!-- konten AJAX akan dirender di sini -->
		</div>
	</div>
</div>

<input type="hidden" name="halaman" id="halaman" value="0">
<input type="hidden" name="supplier_id" id="supplier_id" value="<?= (int) $supplier_id; ?>">

<script>
	$('.clear').on('click', function(){
		$('#keywords').val('');
		$('#halaman').val(0);
		search_Supplier(0);
	});

	$(function(){
		var sid = parseInt($('#supplier_id').val() || '0', 10);
		if (!sid) {
			$('#dataSupplier').html(
				'<div class="alert alert-warning m-3">ID Supplier tidak valid. Silakan kembali ke Data Supplier dan buka detail lagi.</div>'
			);
			return;
		}
		search_Supplier();
	});

	function search_Supplier(page_num){
		page_num = (typeof page_num !== 'undefined' && page_num !== null) ? page_num : 0;

		var keywords    = $('#keywords').val();
		var sortBy      = $('#sortBy').val();
		var limits      = $('#limits').val();
		var supplier_id = $('#supplier_id').val();
		var urlnya      = base_url + "supplier/ajaxDetailSupplier/" + page_num;

		$.ajax({
			type: 'POST',
			url: urlnya,
			data: {
				page: page_num,
				keywords: keywords,
				sortBy: sortBy,
				limits: limits,
				supplier_id: supplier_id
			},
			beforeSend: function(){
				$('body').loading();
			},
			success: function(html){
				$('#dataSupplier').html(html);
				$('body').loading('stop');
				$('#halaman').val(page_num);
			},
			error: function(xhr) {
				sweet('Server!!!', xhr.responseText, 'error', 'danger');
				$('body').loading('stop');
			}
		});
	}

	$('#modal-supplier').on('shown.bs.modal', function() {
		$('#nama_perusahaan').focus();
	});

	$(function(){
		$(document).fcs(".form-control");
	});

	$(document).on('click', '.edit_supplier', function(e) {
		e.preventDefault();
		var dataID = $(this).attr('data-id');
		if(dataID > 0){
			$("#type").val('edit');
			$('.modal-title').html('Edit Data');
			$.ajax({
				url: base_url + 'supplier/get_data',
				data: {id: dataID},
				method: 'POST',
				dataType: 'json',
				beforeSend: function(){ $('body').loading(); },
				success: function(data) {
					$('#modal-supplier').modal({backdrop: 'static', keyboard: false});
					$('#error_piutang').css('display','none');
					$("#id").val(data.id);
					$("#nama_perusahaan").val(data.nama);
					$("#atas_nama").val(data.pemilik);
					$("#jabatan").val(data.jabatan);
					$("#no_hp").val(data.telp);
					$("#email").val(data.email);
					$("#jenis_usaha").val(data.jenis);
					$("#no_rekening").val(data.rekening);
					$("#alamat").val(data.alamat);
					$("#tgl_terdaftar").val(data.tgl);
					$('.simpan').html('Update');
					$('body').loading('stop');
				},
				error: function(xhr){ sweet('Server!!!', xhr.responseText, 'error', 'danger'); $('body').loading('stop'); }
			});
		}else{
			$('#modal-supplier').modal('show');
			$('.modal-title').html('Tambah Data');
			$('.simpan').html('Simpan');
			$("#type").val('add');
			$("#id").val(0);
			setTimeout(function (){ $('#telepon_add').focus(); }, 1000);
		}
	});

	$("#form-edit-supplier").submit(function(e) {
		e.preventDefault();
		var dataform = $("#form-edit-supplier").serialize();
		$.ajax({
			url: base_url + "supplier/simpan",
			type: "post",
			data: dataform,
			dataType: 'json',
			beforeSend: function(){ $('body').loading(); },
			success: function(arr) {
				if (arr.status == 200) {
					showNotif('bottom-right','Hapus data',arr.msg,'success');
				}else{
					sweet('Peringatan!!!',arr.msg,'warning','warning');
				}
				$('#modal-supplier').modal('hide');
				var halaman = parseInt($("#halaman").val() || '0', 10);
				search_Supplier(halaman);
				$("#form-edit-supplier")[0].reset();
				$('body').loading('stop');
			},
			error: function(xhr){ sweet('Server!!!', xhr.responseText, 'error', 'danger'); $('body').loading('stop'); }
		});
	});

	$(document).on('click','.hapus',function(e){
		var id = $("#data-hapus").val();
		$.ajax({
			url: base_url + 'supplier/hapus',
			data: {type:'hapus',id:id},
			method: 'POST',
			dataType:'json',
			beforeSend: function(){ $('body').loading(); },
			success: function(data) {
				if(data.status==200){
					$('#confirm-delete').modal('hide');
					showNotif('bottom-right','Hapus data',data.msg,'success');
				}else{
					sweet('Peringatan!!!',data.msg,'warning','warning');
				}
				$('body').loading('stop');
				var halaman = parseInt($("#halaman").val() || '0', 10);
				search_Supplier(halaman);
			},
			error: function(xhr){ sweet('Server!!!', xhr.responseText, 'error', 'danger'); $('body').loading('stop'); }
		});
	});

	$('#confirm-delete').on('show.bs.modal', function(e) {
		$('#data-hapus').val($(e.relatedTarget).data('id'));
	});
</script>

