@extends('layout.main')

@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Mapping Asuransi - Tindakan</h3>
            </div>
            <div class="card-body">
                <form action="{{ route('asuransi.mapping') }}" method="POST">
                    @csrf
                    <h3>{{ $dataAsuransi->nama }}</h3>
                    <input name="id_asuransi" type="hidden" value="{{ $dataAsuransi->id }}">

                    <div class="table-responsive mt-4">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" id="checkAll"></th>
                                    <th>Nama Tindakan</th>
                                    <th>Tarif Normal</th>
                                    <th>Cover Type</th>
                                    <th>Cover Percentage (%)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($tindakan as $td)
                                    @php
                                        $mapped = $tindakanMapping[$td->id] ?? null;
                                    @endphp
                                    <tr>
                                        <td>
                                            <input type="checkbox"
                                                name="tindakan[{{ $td->id }}][selected]"
                                                value="1"
                                                {{ $mapped ? 'disabled checked' : '' }}>
                                        </td>
                                        <td>{{ $td->nama }}</td>
                                        <td>{{ number_format($td->tarif) }}</td>
                                        <td>
                                            @if ($mapped)
                                                {{ ucfirst($mapped->cover_type) }}
                                            @else
                                                <select name="tindakan[{{ $td->id }}][cover_type]"
                                                        class="form-control cover-type-select"
                                                        data-id="{{ $td->id }}">
                                                    <option value="">Pilih</option>
                                                    <option value="full">Full</option>
                                                    <option value="partial">Partial</option>
                                                    <option value="none">None</option>
                                                </select>
                                            @endif
                                        </td>
                                        <td>
                                            @if ($mapped)
                                                {{ $mapped->cover_percentage ?? '-' }}%
                                            @else
                                                <input type="number"
                                                    name="tindakan[{{ $td->id }}][cover_percentage]"
                                                    class="form-control cover-percentage-input"
                                                    placeholder="%">
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>

                    <div class="mt-4 text-right">
                        <button type="submit" class="btn btn-primary">Simpan Mapping</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection

@push('script')
<script>
    document.getElementById('checkAll').addEventListener('change', function () {
        let checkboxes = document.querySelectorAll('input[type="checkbox"][name$="[selected]"]:not([disabled])');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });

    document.querySelectorAll('.cover-type-select').forEach(select => {
        select.addEventListener('change', function () {
            let selectedCoverType = this.value;
            let tindakanId = this.dataset.id;
            let percentageInput = document.querySelector('input[name="tindakan[' + tindakanId + '][cover_percentage]"]');

            if (selectedCoverType === 'full') {
                percentageInput.value = 100;
                percentageInput.setAttribute('readonly', true);
            } else if (selectedCoverType === 'partial') {
                percentageInput.value = '';
                percentageInput.removeAttribute('readonly');
            } else if (selectedCoverType === 'none') {
                percentageInput.value = 0;
                percentageInput.setAttribute('readonly', true);
            } else {
                percentageInput.value = '';
                percentageInput.removeAttribute('readonly');
            }
        });
    });
</script>
@endpush