@extends('layouts.apex')

@section('title', 'Manajemen Kolam')

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Manajemen Kolam</h1>
            <p class="page-header-subtitle">Kelola data kolam tambak</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kolamModal">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Tambah Kolam
        </button>
    </div>
</div>

<div class="page-body">
    <!-- Summary Cards -->
    <div class="stat-grid">
        <div class="stat-card">
            <div class="stat-icon primary">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                </svg>
            </div>
            <div class="stat-label">Total Kolam</div>
            <div class="stat-value" id="stat-total">{{ $kolams->count() }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon success">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
            <div class="stat-label">Kolam Aktif</div>
            <div class="stat-value" id="stat-active">{{ $kolams->where('is_active', true)->count() }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon info">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
                </svg>
            </div>
            <div class="stat-label">Total Luas</div>
            <div class="stat-value" id="stat-luas">{{ number_format($kolams->sum('luas'), 0) }} m²</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon warning">
                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
            </div>
            <div class="stat-label">Kolam Non-Aktif</div>
            <div class="stat-value" id="stat-inactive">{{ $kolams->where('is_active', false)->count() }}</div>
        </div>
    </div>

    <!-- Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">Daftar Kolam</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="kolamTable" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Luas</th>
                            <th>Kedalaman</th>
                            <th>Jenis</th>
                            <th>Keterangan</th>
                            <th>Status</th>
                            <th>Tebar</th>
                            <th>Panen</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Add Kolam Modal -->
<div id="kolamModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="kolamForm" action="{{ route('kolam.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Tambah Kolam Baru</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label class="form-label">Nama Kolam *</label>
                        <input type="text" name="nama" class="form-control" placeholder="Contoh: A01, A02, B01" required maxlength="10" style="text-transform: uppercase;">
                        <small class="form-text text-muted">Maksimal 10 karakter, akan dikonversi ke huruf kapital</small>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Luas (m²) *</label>
                        <input type="number" name="luas" class="form-control" placeholder="Contoh: 5000" required min="100" step="0.01">
                        <small class="form-text text-muted">Minimum 100 m²</small>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Kedalaman (meter)</label>
                        <input type="number" name="kedalaman" class="form-control" placeholder="Contoh: 1.5" min="0" step="0.1">
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Jenis Kolam</label>
                        <select name="jenis" class="form-select select2-searchable">
                            <option value="">Pilih Jenis</option>
                            <option value="Tradisional">Tradisional</option>
                            <option value="Semi Intensif">Semi Intensif</option>
                            <option value="Intensif">Intensif</option>
                            <option value="Super Intensif">Super Intensif</option>
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Keterangan</label>
                        <textarea name="keterangan" class="form-control" rows="3"></textarea>
                    </div>

                    <div class="form-group mb-3">
                        <div class="form-check">
                            <input type="checkbox" name="is_active" value="1" class="form-check-input" checked>
                            <label class="form-check-label">
                                Kolam Aktif
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Kolam Modal -->
<div id="editKolamModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editKolamForm" action="#" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title">Edit Kolam</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="edit_kolam_id">

                    <div class="form-group mb-3">
                        <label class="form-label">Nama Kolam *</label>
                        <input type="text" name="nama" id="edit_nama" class="form-control" placeholder="Contoh: A01, A02, B01" required maxlength="10" style="text-transform: uppercase;">
                        <small class="form-text text-muted">Maksimal 10 karakter</small>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Luas (m²) *</label>
                        <input type="number" name="luas" id="edit_luas" class="form-control" placeholder="Contoh: 5000" required min="100" step="0.01">
                        <small class="form-text text-muted">Minimum 100 m²</small>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Kedalaman (meter)</label>
                        <input type="number" name="kedalaman" id="edit_kedalaman" class="form-control" placeholder="Contoh: 1.5" min="0" step="0.1">
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Jenis Kolam</label>
                        <select name="jenis" id="edit_jenis" class="form-select select2-searchable">
                            <option value="">Pilih Jenis</option>
                            <option value="Tradisional">Tradisional</option>
                            <option value="Semi Intensif">Semi Intensif</option>
                            <option value="Intensif">Intensif</option>
                            <option value="Super Intensif">Super Intensif</option>
                        </select>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Keterangan</label>
                        <textarea name="keterangan" id="edit_keterangan" class="form-control" rows="3"></textarea>
                    </div>

                    <div class="form-group mb-3">
                        <div class="form-check">
                            <input type="checkbox" name="is_active" id="edit_is_active" value="1" class="form-check-input">
                            <label class="form-check-label">
                                Kolam Aktif
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Global variables
let kolamTable;

function refreshStats() {
    $.ajax({
        url: '{{ route("kolam.stats") }}',
        method: 'GET',
        success: function(response) {
            $('#stat-total').text(response.total);
            $('#stat-active').text(response.active);
            $('#stat-inactive').text(response.inactive);
            $('#stat-luas').text(response.total_luas + ' m²');
        }
    });
}

function viewKolam(id) {
    console.log('viewKolam called with id:', id);
    $.ajax({
        url: '/kolam/' + id,
        method: 'GET',
        success: function(response) {
            console.log('Kolam data received:', response);
            const kolam = response.data;
            const kedalaman = kolam.kedalaman ? kolam.kedalaman + ' meter' : '-';
            const jenis = kolam.jenis || '-';
            const keterangan = kolam.keterangan || '-';
            const statusBadge = kolam.is_active ? '<span class="badge bg-success">AKTIF</span>' : '<span class="badge bg-secondary">NON-AKTIF</span>';

            const htmlContent =
                '<div style="text-align: left;">' +
                    '<p><strong>Nama:</strong> ' + kolam.nama + '</p>' +
                    '<p><strong>Luas:</strong> ' + kolam.luas + ' m²</p>' +
                    '<p><strong>Kedalaman:</strong> ' + kedalaman + '</p>' +
                    '<p><strong>Jenis:</strong> ' + jenis + '</p>' +
                    '<p><strong>Status:</strong> ' + statusBadge + '</p>' +
                    '<p><strong>Keterangan:</strong> ' + keterangan + '</p>' +
                    '<p><strong>Jumlah Tebar:</strong> ' + (kolam.tebar_count || 0) + '</p>' +
                    '<p><strong>Jumlah Panen:</strong> ' + (kolam.panen_count || 0) + '</p>' +
                '</div>';

            Swal.fire({
                title: 'Detail Kolam',
                html: htmlContent,
                icon: 'info',
                confirmButtonText: 'Tutup',
                confirmButtonColor: '#435ebe'
            });
        },
        error: function() {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Gagal mengambil data kolam!'
            });
        }
    });
}

function editKolam(id) {
    console.log('editKolam called with id:', id);
    $.ajax({
        url: '/kolam/' + id,
        method: 'GET',
        success: function(response) {
            console.log('Kolam data received:', response);
            const kolam = response.data;

            // Update form
            $('#edit_kolam_id').val(kolam.id);
            $('#edit_nama').val(kolam.nama);
            $('#edit_luas').val(kolam.luas);
            $('#edit_kedalaman').val(kolam.kedalaman || '');
            $('#edit_jenis').val(kolam.jenis || '').trigger('change');
            $('#edit_keterangan').val(kolam.keterangan || '');
            $('#edit_is_active').prop('checked', kolam.is_active);

            // Update form action
            $('#editKolamForm').attr('action', '/kolam/' + kolam.id);

            // Show modal using Bootstrap 5 API
            const modal = new bootstrap.Modal(document.getElementById('editKolamModal'));
            modal.show();
            console.log('Modal shown!');
        },
        error: function(xhr) {
            console.error('Error fetching kolam:', xhr);
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Gagal mengambil data kolam!'
            });
        }
    });
}

function deleteKolam(id) {
    console.log('deleteKolam called with id:', id);
    Swal.fire({
        title: 'Hapus Kolam?',
        text: 'Apakah Anda yakin ingin menghapus kolam ini?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, hapus!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '/kolam/' + id,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'DELETE'
                },
                success: function(response) {
                    refreshStats();
                    $('#kolamTable').DataTable().ajax.reload(null, false);
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: 'Kolam berhasil dihapus!',
                        timer: 2000,
                        showConfirmButton: false
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: xhr.responseJSON?.message || 'Gagal menghapus kolam!'
                    });
                }
            });
        }
    });
}

function resetKolamForm() {
    $('#kolamForm')[0].reset();
    $('#kolamForm .select2-searchable').val(null).trigger('change');
}

function resetEditKolamForm() {
    $('#editKolamForm')[0].reset();
    $('#editKolamForm .select2-searchable').val(null).trigger('change');
}

$(document).ready(function() {
    // Auto uppercase nama kolam
    $('input[name="nama"]').on('input', function() {
        this.value = this.value.toUpperCase();
    });

    // Initialize Select2 for jenis dropdown
    $('.select2-searchable').select2({
        theme: 'bootstrap4',
        placeholder: 'Pilih Jenis Kolam',
        allowClear: true,
        width: '100%'
    });

    kolamTable = $('#kolamTable').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 10,
        lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
        responsive: true,
        dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex gap-2"B><"d-flex gap-2"lf>>rt<"d-flex justify-content-between align-items-center mt-3"<"info"i><"pagination"p>>',
        buttons: [
            {
                extend: 'copy',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg> Copy',
                className: 'btn btn-sm'
            },
            {
                extend: 'csv',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> CSV',
                className: 'btn btn-sm'
            },
            {
                extend: 'excel',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg> Excel',
                className: 'btn btn-sm'
            },
            {
                extend: 'pdf',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg> PDF',
                className: 'btn btn-sm'
            },
            {
                extend: 'print',
                text: '<svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg> Print',
                className: 'btn btn-sm'
            }
        ],
        ajax: {
            url: '{{ route("kolam.data") }}',
            type: 'GET',
            data: function(d) {
                d._token = '{{ csrf_token() }}';
            }
        },
        columns: [
            { data: 'nama', name: 'nama', searchable: true, orderable: true },
            { data: 'luas_format', name: 'luas', searchable: false, orderable: true },
            { data: 'kedalaman', name: 'kedalaman', searchable: true, orderable: true },
            { data: 'jenis', name: 'jenis', searchable: true, orderable: true },
            { data: 'keterangan', name: 'keterangan', searchable: true, orderable: true },
            { data: 'status_badge', name: 'is_active', searchable: true, orderable: true },
            { data: 'tebar_count', name: 'tebar_count', searchable: false, orderable: false },
            { data: 'panen_count', name: 'panen_count', searchable: false, orderable: false },
            { data: 'actions', orderable: false, searchable: false }
        ],
        order: [[0, 'asc']],
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/id.json'
        }
    });

    // Add kolam form submit
    $('#kolamForm').on('submit', function(e) {
        e.preventDefault();
        const formData = $(this).serialize();

        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: formData,
            success: function(response) {
                refreshStats();
                // Hide modal using Bootstrap 5 API
                const modalEl = document.getElementById('kolamModal');
                const modal = bootstrap.Modal.getInstance(modalEl);
                if (modal) {
                    modal.hide();
                }
                $('#kolamTable').DataTable().ajax.reload(null, false);
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: 'Kolam berhasil ditambahkan!',
                    timer: 2000,
                    showConfirmButton: false
                });
                resetKolamForm();
            },
            error: function(xhr) {
                console.error('Error:', xhr);
                let errorMsg = 'Terjadi kesalahan!';
                if (xhr.responseJSON) {
                    if (xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    } else if (xhr.responseJSON.errors) {
                        errorMsg = Object.values(xhr.responseJSON.errors).join(', ');
                    }
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: errorMsg
                });
            }
        });
    });

    // Edit kolam form submit
    $('#editKolamForm').on('submit', function(e) {
        e.preventDefault();
        const kolamId = $('#edit_kolam_id').val();
        const formData = $(this).serialize();

        $.ajax({
            url: '/kolam/' + kolamId,
            method: 'POST',
            data: formData + '&_method=PUT',
            success: function(response) {
                refreshStats();
                // Hide modal using Bootstrap 5 API
                const modalEl = document.getElementById('editKolamModal');
                const modal = bootstrap.Modal.getInstance(modalEl);
                if (modal) {
                    modal.hide();
                }
                $('#kolamTable').DataTable().ajax.reload(null, false);
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil',
                    text: 'Kolam berhasil diperbarui!',
                    timer: 2000,
                    showConfirmButton: false
                });
            },
            error: function(xhr) {
                console.error('Error:', xhr);
                let errorMsg = 'Terjadi kesalahan!';
                if (xhr.responseJSON) {
                    if (xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    } else if (xhr.responseJSON.errors) {
                        errorMsg = Object.values(xhr.responseJSON.errors).join(', ');
                    }
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: errorMsg
                });
            }
        });
    });

    // Reset form when modal is closed
    $('#kolamModal').on('hidden.bs.modal', function() {
        resetKolamForm();
    });

    $('#editKolamModal').on('hidden.bs.modal', function() {
        resetEditKolamForm();
    });
});
</script>
@endpush
@endsection