@extends('master.app')
@section('title', 'customer')
@section('body')
    <main class="app-content">
        <section class="">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <h4>Debitors / عام قرضدارن</h4>
                        </div>
                        <div class="col-md-8">
                            <div class="btn-group" role="group" aria-label="Basic example" style="float: right">
                                <a data-toggle="modal" data-target="#userModal"
                                    class="btn btn-primary btn-rounded btn-sm text-light">Add</a>

                            </div>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-md-12">
                            <table class="table text-center table-striped  dt-responsive"
                                style="border-collapse: collapse; border-spacing: 0;" id="customer_table">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Phone</th>
                                        <th scope="col">Register Date</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($debitors as $row)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $row->name }}</td>
                                            <td>{{ $row->phone }}
                                            </td>
                                            <td>{{ $row->created_at }}
                                            </td>
                                            <td>
                                                <a href="{{ route('debitor_account.edit', $row->id) }}">
                                                    <i class="fa fa-pencil text-primary"></i></a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tbody>
                                </tbody>
                            </table>

                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="card">
                            <div class="card-body">
                                {{ $debitors->links('pagination::bootstrap-4') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <div class="modal animated flipInX faster" id="userModal">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">New Debitor</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <form method="POST" action="{{ route('debitor_account.store') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>

                            <div class="col-md-6">
                                <input id="name" type="text"
                                    class="form-control @error('name') is-invalid @enderror" name="name"
                                    value="{{ old('name') }}" required autocomplete="name" autofocus>

                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="Phone" class="col-md-4 col-form-label text-md-right">{{ __(' Phone') }}</label>

                            <div class="col-md-6">
                                <input id="Phone" type="text"
                                    class="form-control @error('Phone') is-invalid @enderror" name="phone"
                                    value="{{ old('Phone') }}" required autocomplete="Phone">

                                @error('Phone')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="address"
                                class="col-md-4 col-form-label text-md-right">{{ __(' Address') }}</label>
                            <div class="col-md-6">
                                <input id="address" type="text"
                                    class="form-control @error('address') is-invalid @enderror" name="address"
                                    value="{{ old('address') }}" required autocomplete="address">
                                @error('address')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Register') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('pageJs')
    <script type="text/javascript">
        $(".app-menu").removeClass("active");
        $("#nav_hri").addClass("active");
        $("#hri").addClass("is-expanded");
        $("#nav_emp_payment").addClass("active");
    </script>
@endsection