@extends('newDashboard.index')

@section('css')
    <link rel="stylesheet" href="{{ asset('metronic/css/data-table.css') }}">
@endsection

@section('main-content')
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-cash-minus"></i>
                </span> {{ __('Deductions') }}
            </h3>
        </div>
        <div class="row">
            <div id="success_message"></div>
            <div class="buttons-container">
                <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal"
                        data-bs-target="#addModal">{{ __('Add Deduction') }}</button>
            </div>
            <div class="table-responsive customscroll">
                <table class="table datatable deductions-datatable text-center" id="table">
                    <thead>
                    <tr>
                        <th>{{ __('User') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Monthly Deduction') }}</th>
                        <th>{{ __('Date Start Of Deduction') }}</th>
                        <th>{{ __('Actions') }}</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Add Deduction') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="addDeduction" action="{{ route('hr.deductions.store') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label>{{ __('User') }}</label>
                                <select name="user_id" class="form-control select2">
                                    @php
                                        $users = \App\Models\User::activeContract()
                                            ->select('id', 'name')
                                            ->orderBy('name')
                                            ->get();
                                    @endphp
                                    @foreach($users as $u)
                                        <option value="{{ $u->id }}" {{ old('user_id') == $u->id ? 'selected' : '' }}>
                                            {{ $u->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>{{ __('Monthly Deduction') }}</label>
                                <input type="number" class="form-control" name="monthly_deduction" step="0.01">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>{{ __('Date Start Of Deduction') }}</label>
                                <input type="month" class="form-control" name="date_start_of_deduction">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">{{ __('Close') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Payment Modal -->
    <div class="modal fade" id="payment-modal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Deduction Payment Details') }}</h5>
                    <button type="button" class="btn btn-close" data-bs-dismiss="modal"></button>
                </div>

                <input type="hidden" id="edit_id" name="id">
                <div class="modal-body">

                    <table class="table bg-white fw-bold p-2 rounded">
                        <tbody>
                        <tr>
                            <td>{{__("User")}}</td>
                            <td id="user">-</td>
                        </tr>
                        <tr>
                            <td>{{__("Responsible")}}</td>
                            <td id="responsible">-</td>
                        </tr>
                        <tr>
                            <td>{{__("Status")}}</td>
                            <td id="status">-</td>
                        </tr>
                        <tr>
                            <td>{{__("Monthly Deduction")}}</td>
                            <td id="monthly_deduction">-</td>
                        </tr>
                        <tr>
                            <td>{{__("Date Start Of Deduction")}}</td>
                            <td id="date_start_of_deduction">-</td>
                        </tr>
                        </tbody>
                    </table>
                    <hr/>
                    {{-- <div class="bg-white p-2 rounded">
                        <p>{{__("Payment History")}}</p>
                        <table class="table datatable payment-dataTable">
                            <thead>
                            <tr>
                                <th>{{__("Amount")}}</th>
                                <th>{{__("Date")}}</th>
                                <th>{{__("Payment Mode")}}</th>
                                <th>{{__("Responsible")}}</th>
                            </tr>
                            </thead>
                        </table>
                    </div> --}}
                    {{-- <form id="add-payment" method="POST" action="">
                        @csrf
                        <div class="bg-white p-2 mt-3 rounded">
                            <p>{{__("Add Payment")}}</p>
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label>{{ __('Amount') }}</label>
                                    <input type="number" class="form-control" name="amount" step="0.01">
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-primary">{{__("Add Payment")}}</button>
                                </div>
                            </div>
                        </div>
                    </form> --}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        window.DEDUCT_ROUTES = {
            index: "{{ route('hr.deductions.index') }}",
            datatable: "{{ route('hr.deductions.datatable') }}",
            show: "{{ route('hr.deductions.show', ['deduction' => '__ID__']) }}",
            paymentDatatable: "{{ route('hr.deductions.payment.datatable', ['id' => '__ID__']) }}",
            addPayment: "{{ route('hr.deductions.payment.add', ['deduction_id' => '__ID__']) }}",
            store: "{{ route('hr.deductions.store') }}",
        };
        var translations = {
            'Are you sure?': '{{ __("Are you sure?") }}',
            'You won\'t be able to revert this!': '{{ __("You won't be able to revert this!") }}',
            'Yes, delete it!': '{{ __("Yes, delete it!") }}',
            'Cancel': '{{ __("Cancel") }}',
            'Deleted!': '{{ __("Deleted!") }}',
            'Error!': '{{ __("Error!") }}',
            'Something went wrong while deleting.': '{{ __("Something went wrong while deleting.") }}',
        };
    </script>
    <script src="{{ asset('metronic/js/pages/hr/deduction.js') }}"></script>
@endsection