@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-package"></i>
                </span> {{ __('Loans') }}
            </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 Loan') }}</button>
            </div>
            <div class="table-responsive customscroll">
                <table class="table datatable loans-datatable text-center" id="table">
                    <thead>
                    <tr>
                        <th>{{ __('User') }}</th>
                        <th>{{ __('Responsible') }}</th>
                        <th>{{ __('Amount') }}</th>
                        <th>{{ __('Remaining Amount') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Automatic Deduction') }}</th>
                        <th>{{ __('Monthly Deduction') }}</th>
                        <th>{{ __('Date Start Of Deduction') }}</th>
                        <th>{{ __('Actions') }}</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Add Loan Modal -->
    <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 Loan') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="addLoan" action="{{ route('hr.loans.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">
                                    @foreach(\App\Models\User::activeContract()->get() as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>{{ __('Amount') }}</label>
                                <input type="number" class="form-control" name="amount">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>{{ __('Monthly Deduction') }}</label>
                                <input type="number" class="form-control" name="monthly_deduction">
                            </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 class="col-md-6 mb-3">
                                <label>{{ __('Automatic Deduction') }}</label>
                                <select name="automatic_deduction" class="form-control">
                                    <option value="1">{{ __('Yes') }}</option>
                                    <option value="0">{{ __('No') }}</option>
                                </select>
                            </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>

    <!-- Edit Loan Modal -->
    <div class="modal fade" id="payment-modal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Loan Payment Details') }}</h5>
                    <button type="button" class="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">bla bla</td>
                        </tr>
                        <tr>
                            <td>{{__("Responsible")}}</td>
                            <td id="responsible">bla bla</td>
                        </tr>
                        <tr>
                            <td>{{__("Amount")}}</td>
                            <td id="amount">bla bla</td>
                        </tr>
                        <tr>
                            <td>{{__("Status")}}</td>
                            <td id="status">bla bla</td>
                        </tr>
                        <tr>
                            <td>{{__("Automatic Deduction")}}</td>
                            <td id="automatic_deduction">bla bla</td>
                        </tr>
                        <tr>
                            <td>{{__("Monthly Deduction")}}</td>
                            <td id="monthly_deduction">bla bla</td>
                        </tr>
                        <tr>
                            <td>{{__("Date Start Of Deduction")}}</td>
                            <td id="date_start_of_deduction">bla bla</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="{{ route('hr.loans.add-payment', '') }}">
                        @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">
                                </div>
                                <div class="col-12">
                                    <button class="btn btn-primary">{{__("Add Payment")}}</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    {{--                        <div class="row">--}}
                    {{--                            <div class="col-md-6 mb-3">--}}
                    {{--                                <label>{{ __('User') }}</label>--}}
                    {{--                                <select name="user_id" class="form-control select2">--}}
                    {{--                                    @foreach(\App\Models\User::get() as $user)--}}
                    {{--                                        <option value="{{ $user->id }}">{{ $user->name }}</option>--}}
                    {{--                                    @endforeach--}}
                    {{--                                </select>--}}
                    {{--                            </div>--}}
                    {{--                            <div class="col-md-6 mb-3">--}}
                    {{--                                <label>{{ __('Amount') }}</label>--}}
                    {{--                                <input type="number" class="form-control" name="amount">--}}
                    {{--                            </div>--}}
                    {{--                            <div class="col-md-6 mb-3">--}}
                    {{--                                <label>{{ __('Monthly Deduction') }}</label>--}}
                    {{--                                <input type="number" class="form-control" name="monthly_deduction">--}}
                    {{--                            </div>--}}
                    {{--                            <div class="col-md-6 mb-3">--}}
                    {{--                                <label>{{ __('Automatic Deduction') }}</label>--}}
                    {{--                                <select name="automatic_deduction" class="form-control">--}}
                    {{--                                    <option value="1">{{ __('Yes') }}</option>--}}
                    {{--                                    <option value="0">{{ __('No') }}</option>--}}
                    {{--                                </select>--}}
                    {{--                            </div>--}}
                    {{--                        </div>--}}
                </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>
        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/loans.js")}}"></script>

@endsection