@extends('layouts.master')

@section('content')
<div class="card">
    <div class="card-header card-custom-bg d-flex flex-row align-items-center justify-content-between">
        <h5>Accounting Head</h5>
        @can('accounting-finance.accounting-head.create')
            <button class="btn btn-primary" id="add-head-btn" data-toggle="modal" data-target="#dataStoreModal">Create head</button>
        @endcan
    </div>
    <div class="card-body">
        <table class="table mt-3" id="dataTable">
            <thead class="thead-light">
                <tr>
                    <th>ID</th>
                    <th>Head Name</th>
                    <th>Head Type</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @php
                    $sn = 0;
                @endphp
                @foreach($accounting_heads as $head)
                <tr>
                    <td>{{ ++$sn }}</td>
                    <td>{{ $head->name }}</td>
                    <td>{{ ucfirst($head->type) }}</td>
                    <td>
                        @can('accounting-finance.accounting-head.edit')
                            <button class="btn btn-sm btn-warning edit-head-btn" data-toggle="modal" data-target="#dataStoreModal" data-id="{{ $head->id }}" data-name="{{ $head->name }}" data-type="{{ $head->type }}">Edit</button>
                        @endcan

                        @can('accounting-finance.accounting-head.delete')
                            <form action="{{ route('accounting_head.destroy', $head->id) }}" method="POST" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')">Delete</button>
                            </form>
                        @endcan
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="dataStoreModal" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form role="form" id="headForm" method="POST">
                @csrf
                @method('POST')
                <input type="hidden" name="_method" id="formMethod">
                <div class="modal-header">
                    <h4 class="modal-title" id="modalTitle">Create Accounting Head</h4>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">Head Name</label>
                        <input type="text" name="name" class="form-control" id="head_name" placeholder="Enter Accounting Head Name" required>
                    </div>

                    <div class="form-group">
                        <label for="type">Head Type</label>
                        <select name="type" class="form-control type" id="type" required>
                            <option value="">--Select Head Type--</option>
                            @foreach ($types as $type)
                                <option value="{{$type}}">{{ucfirst($type)}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary submitBtn">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

@section('scripts')
<script>
    $(document).ready(function () {
        $('#dataStoreModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var name = button.data('name') || '';
            var type = button.data('type') || '';
            var id = button.data('id') || '';

            var modal = $(this);
            var form = modal.find('form');
            var actionUrl = id ? '/accounting-head/update/' + id : '/accounting-head/store';
            var method = id ? 'PUT' : 'POST';

            form.attr('action', actionUrl);
            modal.find('#head_name').val(name);
            modal.find('#type option[value="' + type + '"]').prop('selected', true); // Add this line
            modal.find('#formMethod').val(method);
            modal.find('#modalTitle').text(id ? 'Edit accounting head' : 'Create accounting head');
            modal.find('[name="_method"]').val(method);
        });

        $('#add-head-btn').on('click', function () {
            resetModal();
        });

        function resetModal() {
            var modal = $('#dataStoreModal');
            var form = modal.find('form');
            form.attr('action', '/accounting-head');
            modal.find('#head_name').val('');
            modal.find('#type').val('');
            modal.find('#formMethod').val('POST');
            modal.find('[name="_method"]').val('POST');
            modal.find('#modalTitle').text('Create accounting head');
        }
    });
</script>
@endsection

@stop