@extends('layouts.customer')
@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb  py-0">
            <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">{{ __('messages.Home') }}</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.customers.index') }}">{{ __('messages.Customers') }}</a></li>
            <li class="breadcrumb-item">
                @php
                    $first_name = explode(' ', $user->name);
                    $first_name = $first_name[0];
                @endphp
                {{ $first_name }}
            </li>
        </ol>
    </nav>
    {{-- Start  Info --}}
    <div class="col-md-12">
        <div class="card"  >
            <h5 class="card-header bg-light-subtle" data-bs-toggle="collapse" data-bs-target="#collapse1">{{ __('messages.Your data') }}
                <span class="text-primary fs-3"
                style="float: inline-end;"><i class="mdi mdi-plus-circle"></i></span>
            </h5>
            <div class="card-body collapse show" id="collapse1">
                <div class="responsive-table-plugin">

                    <div class="table-rep-plugin">
                        <div class="table-responsive" data-pattern="priority-columns">
                            <table id="tech-companies-1" class="table table-striped">
                                <thead>
                                </thead>
                                <tbody>

                                    <tr>
                                        <td class="border border-dark" style="min-width: 300px">
                                            <div class="d-flex justify-content-between">
                                                <div class="div">{{ __('messages.Name') }}</div>
                                                <strong>
                                                    <div class="div">{{ $user->name }}</div>
                                                </strong>
                                            </div>
                                        </td>
                                        <td class="border border-dark" style="min-width: 300px">
                                            <div class="d-flex justify-content-between">
                                                <div class="div">{{ __('messages.Username') }}</div>
                                                <strong>
                                                    <div class="div">
                                                        {{ $user->username }}
                                                    </div>
                                                </strong>
                                            </div>
                                        </td>
                                    </tr>



                                    <tr>
                                        <td class="border border-dark" style="min-width: 300px">
                                            <div class="d-flex justify-content-between">
                                                <div class="div">{{ __('messages.Mobile') }}</div>
                                                <strong>
                                                    <div class="div">{{ $user->mobile }}</div>
                                                </strong>
                                            </div>
                                        </td>
                                        <td class="border border-dark" style="min-width: 300px">
                                            <div class="d-flex justify-content-between">
                                                <div class="div">{{ __('messages.Company Name') }}</div>
                                                <strong>
                                                    <div class="div">
                                                        {{ $user->company_name ? $user->company_name : __('messages.unregistered') }}
                                                    </div>
                                                </strong>
                                            </div>
                                        </td>
                                    </tr>


                                    <tr>
                                        <td class="border border-dark" style="min-width: 300px">
                                            <div class="d-flex justify-content-between">
                                                <div class="div">{{ __('messages.Tax username') }}</div>
                                                <strong>
                                                    <div class="div">
                                                        {{ $user->user_tax ? $user->user_tax : __('messages.unregistered') }}
                                                    </div>
                                                </strong>
                                            </div>
                                        </td>
                                        <td class="border border-dark" style="min-width: 300px">
                                            <div class="d-flex justify-content-between">
                                                <div class="div">{{ __('messages.Tax password') }}</div>
                                                <strong>
                                                    <div class="div">
                                                        {{ $user->password_tax ? $user->password_tax : __('messages.unregistered') }}
                                                    </div>
                                                </strong>
                                            </div>
                                        </td>
                                    </tr>


                                    <tr>
                                        <td class="border border-dark" style="min-width: 300px">
                                            <div class="d-flex justify-content-between">
                                                <div class="div">{{ __('messages.Electronic seal password') }}</div>
                                                <strong>
                                                    <div class="div">
                                                        {{ $user->electronic_stamp_password ? $user->electronic_stamp_password : __('messages.unregistered') }}
                                                    </div>
                                                </strong>
                                            </div>
                                        </td>
                                        <td class="border border-dark" style="min-width: 300px">
                                            <div class="d-flex justify-content-between">
                                                <div class="div">{{ __('messages.Register Date') }}</div>
                                                <strong>
                                                    <div class="div">
                                                        {{ date('Y / m / d  - h:i a', strtotime($user->created_at)) }}
                                                    </div>
                                                </strong>
                                            </div>
                                        </td>
                                    </tr>


                                </tbody>
                            </table>
                        </div> <!-- end .table-responsive -->

                    </div> <!-- end .table-rep-plugin-->
                </div> <!-- end .responsive-table-plugin-->
            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end col-->
    {{--  End  Info --}}





    {{-- Start  folders --}}
    <div class="col-md-12">
        <div class="card">

            <div class="d-flex justify-content-between card-header bg-light-subtle">
                <h5>
                    {{ __("messages.Your folders") }}
                </h5>
            </div>
            <div class="card-body">

                <div class="row folders-user">
                    @if (!$user->folders->count())
                        <div class="folders-notfound">
                            <div class="text-center">
                                <img src="{{ asset('assets/images/empty_data.svg') }}" height="300" width="300">
                            </div>
                            <div class="text-center h3 text-dark">
                                {{ __("messages.There are no data") }} :(
                            </div>
                        </div>


                    @else
                    @foreach ($user->folders as $folder)
                        <div class="col-lg-3 col-md-4 col">
                            <div class="p-1 text-center">
                                <a href="{{ route('folders.show' , $folder->id) }}">
                                    <i class="mdi mdi-folder-open" style="font-size: 150px ; color:rgb(254 231 154)"></i>
                                    <div class="text-center ">{{ $folder->name }}</div>
                                </a>
                            </div>
                        </div>
                    @endforeach


                </div>
                @endif
            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end col-->
    {{--  End  folder --}}
    {{-- Start  folders --}}
    <div class="col-md-12">
        <div class="card">

            <div class="d-flex justify-content-between card-header bg-light-subtle">
                <h5>
                    {{ __('messages.Client Transaction And Payment') }}
                </h5>
                {{-- <div class="btn-group" role="group" aria-label="Basic outlined example">
                    <button class="btn btn-outline-info" data-bs-toggle="modal" data-bs-target="#login-modal"><i
                            class="mdi mdi-plus-circle"></i> {{ __('messages.Create') }}</button>
                </div> --}}
            </div>
            <div class="card-body">

                @if (!$transactions->count())
                    <div class="text-center">
                        <img src="{{ asset('assets/images/empty_data.svg') }}" height="300" width="300">
                    </div>
                    <div class="text-center h3 text-dark">
                        {{ __('messages.There are no data') }} :(
                    </div>
                @else
                    <div class="d-flex justify-content-between mb-3">
                        {{-- <div>{{ __('messages.Count : ') }} <strong>{{ $tasks->total() }}</strong></div> --}}


                    </div>
                    <div class="responsive-table-plugin">

                        <div class="table-rep-plugin">
                            <div class="table-responsive" data-pattern="priority-columns">
                                <table id="tech-companies-1" class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th data-priority="3">{{ __('messages.Title') }}</th>

                                            {{--  <th data-priority="3">{{ __('messages.Date created') }}</th>
                                            <th data-priority="3">{{ __('messages.Time created') }}</th>
                                            <th data-priority="3">{{ __('messages.Added by') }}</th>  --}}
                                            <th data-priority="3">{{ __('messages.Amount') }}</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $i = 1;
                                            $skipCount = $transactions->perPage() * $transactions->currentPage() - $transactions->perPage();
                                        @endphp
                                        @foreach ($transactions as $transaction)
                                            <tr>
                                                <th>{{ $skipCount + $i }}</th>
                                                @php $i++  @endphp
                                                <td>{{$transaction->title}}</td>
                                                {{--  <td>
                                                    {{ date('Y / m / d', strtotime($transaction->created_at)) }}
                                                </td>


                                                <td>
                                                    {{ date('h:i a', strtotime($transaction->created_at)) }}
                                                </td>
                                                <td>
                                                    {{ $transaction->admin->name }}
                                                </td>  --}}

                                                <td class="{{$transaction->in_out == "out" ? " text-danger " : " text-success "}}">{{$transaction->in_out == "out" ? " - " : " + "}}{{$transaction->amount}}</td>

                                            </tr>
                                        @endforeach

                                    </tbody>
                                </table>
                            </div> <!-- end .table-responsive -->
                             {{ $transactions->appends(Request::except(['_token']))->links()}}
                        </div> <!-- end .table-rep-plugin-->
                    </div> <!-- end .responsive-table-plugin-->
                @endif
            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end col-->
    {{--  End  folder --}}


    <!-- SignIn modal content -->
    <div id="login-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content rounded">
                <div class="modal-body">
                    <div class="auth-brand text-center mt-2 mb-4 position-relative top-0">
                        <h3>{{ __("messages.Add a new folder") }}</h3>
                    </div>

                    <form id="form_create_folder" method="POST" action="{{ route('admin.customers.folders.store') }}" class="ps-3 pe-3">
                        @csrf
                        <input type="hidden" name="user_id" value="{{ $user->id }}">
                        <div class="mb-3">
                            <label for="inp_name" class="form-label">{{ __("messages.Name") }}</label>
                            <input class="form-control" type="text" name="name" id="inp_name" required="" placeholder="{{ __('messages.Name') }}">
                            <span class="error_msg text-danger"></span>
                        </div>
                        <div class="mb-3 text-center">
                            <button class="btn  btn-primary btn-block"  type="submit">{{ __("messages.Save") }}</button>
                        </div>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@endsection
@section('script')

<script>

    $(function(){


        $("#form_create_folder").submit(function(e){
            e.preventDefault()
            var data = $(this).serialize();
            var url = $(this).attr("action");
            var method = $(this).attr("method");
            $.ajax({
                url,
                method,
                data,
                success:function(res){

                    $("#login-modal").modal("hide")

                   toast_alert("success" , "{{ __('messages.done successfully') }}")

                   var name = $("#inp_name").val();
                   $(".folders-user").prepend(`
                   <div class="col-lg-3 col-md-4 col">
                        <div class="p-1 text-center">
                            <a href="${res.url}">
                                <i class="mdi mdi-folder-open" style="font-size: 150px ; color:rgb(254 231 154)"></i>
                                <div class="text-center ">${name}</div>
                            </a>
                        </div>
                    </div>
                   `)
                   $(".error_msg").html('')
                   $("#inp_name").val(null)
                   $(".folders-notfound").remove()

                },
                error:function(res){
                    if(res.status == 422){
                        $(".error_msg").html(res.responseJSON.message)
                    }else{
                        $(".error_msg").html("Server Error !")

                    }

                }


            })
        })
    })
</script>
@endsection