@extends('layouts.app')

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ $module_title }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">{{ $module_title }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                   <div class="card card-default">
                        <div class="card-header">
                            <h3 class="card-title">{{ isset($client) ? 'Edit' : 'Create' }} Salary Format</h3>

                            <div class="float-right">
                                <a href="{{ url()->previous() }}" class="btn btn-secondary mr-2">
                                    <i class="fa fa-arrow-left"></i> Back
                                </a>
                            </div>
                        </div>

                        <div class="card-body">
                            <form method="POST"
                                action="{{ isset($client) ? route('salary-format.update', $client->id) : route('salary-format.store') }}">
                                @csrf

                                @if (!isset($client))
                                    <div class="mb-3">
                                        <label>Select Client</label>
                                        <select name="client_id" class="form-control" required>
                                            @foreach ($clients as $cli)
                                                <option value="{{ $cli->id }}">{{ $cli->establishment_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                @else
                                    <h5>Client: {{ $client->establishment_name }}</h5>
                                @endif

                                <table class="table table-bordered" id="component_table">
                                    <thead>
                                        <tr>
                                            <th>Component Name <small>Need to maintain same name in csv</small></th>
                                            <th>Type</th>
                                            <th>Required</th>
                                            <th>DB Column</th>
                                            <th>
                                                <button type="button" class="btn btn-sm btn-success"
                                                    onclick="addRow()">+</button>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $rows = isset($components) ? $components : [null]; @endphp
                                        @foreach ($rows as $i => $component)
                                            <tr>
                                                <td>
                                                    <input type="hidden" name="components[{{ $i }}][id]"
                                                        value="{{ $component->id ?? '' }}">
                                                    <input name="components[{{ $i }}][name]"
                                                        class="form-control" value="{{ $component->name ?? '' }}" required>
                                                </td>
                                                <td>
                                                    <select name="components[{{ $i }}][type]"
                                                        class="form-control">
                                                        <option value="earning"
                                                            {{ isset($component) && $component->type == 'earning' ? 'selected' : '' }}>
                                                            Earning</option>
                                                        <option value="deduction"
                                                            {{ isset($component) && $component->type == 'deduction' ? 'selected' : '' }}>
                                                            Deduction</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <select name="components[{{ $i }}][is_required]"
                                                        class="form-control">
                                                        <option value="1"
                                                            {{ isset($component) && $component->is_required ? 'selected' : '' }}>
                                                            Yes</option>
                                                        <option value="0"
                                                            {{ isset($component) && !$component->is_required ? 'selected' : '' }}>
                                                            No</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <select name="components[{{ $i }}][salary_type]"
                                                        class="form-control">
                                                        <option value="1">Select Column</option>
                                                        @foreach ($salary_types as $k => $data)
                                                            <option value="{{ $data->id }}"
                                                                {{ isset($component) && $component->salary_type == $data->id ? 'selected' : '' }}>
                                                                {{ $data->salary_type }}</option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td>
                                                    @if ($i > 0)
                                                        <button type="button" class="btn btn-sm btn-danger"
                                                            onclick="this.closest('tr').remove()">x</button>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                                <button class="btn btn-primary">Save</button>
                            </form>
                        </div> <!-- /.card-body -->
                    </div> <!-- /.card -->
                </div> <!-- /.col-12 -->
            </div> <!-- /.row -->
        </div> <!-- /.container-fluid -->
    </section>

    <script>
        let rowIndex = {{ isset($components) ? count($components) : 1 }};
        const salaryTypes = @json($salary_types);

        function addRow() {
            const table = document.querySelector("#component_table tbody");
            const row = document.createElement("tr");

            let salaryTypeOptions = `<option value="1">Select Column</option>`;
            salaryTypes.forEach(data => {
                salaryTypeOptions += `<option value="${data.id}">${data.salary_type}</option>`;
            });

            row.innerHTML = `
                <td><input name="components[${rowIndex}][name]" class="form-control" required></td>
                <td>
                    <select name="components[${rowIndex}][type]" class="form-control">
                        <option value="earning">Earning</option>
                        <option value="deduction">Deduction</option>
                    </select>
                </td>
                <td>
                    <select name="components[${rowIndex}][is_required]" class="form-control">
                        <option value="1">Yes</option>
                        <option value="0">No</option>
                    </select>
                </td>
                <td>
                    <select name="components[${rowIndex}][salary_type]" class="form-control">
                        ${salaryTypeOptions}
                    </select>
                </td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger" onclick="this.closest('tr').remove()">x</button>
                </td>
            `;
            table.appendChild(row);
            rowIndex++;
        }
    </script>
@endsection