@extends('admin.layouts.adminmaster')

@section('title', 'View Client')

@section('content') 
 

<div class="mb-5">
    <div class="row">
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header d-flex g-2 justify-content-between align-items-center">
                    <h5 class="mb-0">Client Details</h5>
                    <a href="#!" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#remark-modal">Add Remark </a>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label class="form-label" for="">Parent Company</label>
                            <div class="position-relative">
                                <input type="text" class="form-control" id="reference" value="{{$client->company->name}}" name="Company Name" placeholder="Enter Reference" disabled/>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label" for="">Reference</label>
                            <div class="position-relative">
                                <input type="text" class="form-control" id="" placeholder="Enter Reference" value="{{$client->reference}}" disabled/>
                            </div>
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label class="form-label" for="">Salutation</label>
                            <div class="position-relative">
                                <input type="text" class="form-control"  
                                @if ($client->salutation == 1) 
                                    value="Mr"
                                @elseif ($client->salutation == 2)
                                    value="Miss"
                                @else
                                    value="Mrs"
                                @endif

                                disabled />
                            </div>
                        </div>

                        <div class="col-lg-6 mb-3">
                            <label class="form-label" for="">Forename</label>
                            <div class="position-relative">
                                <input type="text" class="form-control" id="" placeholder="Enter Forename"value="{{$client->forename}}" disabled/>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label" for="">Surname</label>
                            <div class="position-relative">
                                <input type="text" class="form-control" id="" placeholder="Enter Surname" value="{{$client->surname}}" disabled/>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label" for="">Birth Date</label>
                            <div class="position-relative">
                                <input type="text" class="form-control flatpicker-dob" id="" placeholder="Enter Birth Date (YYYY-MM-DD)" value="{{$client->birth_date}}" disabled/>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label" for="">Mobile Number</label>
                            <div class="position-relative">
                                <input type="number" class="form-control" id="phone" placeholder="Enter Mobile Number" value="{{$client->phone}}" disabled/>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label" for="">Landline</label>
                            <div class="position-relative">
                                <input type="number" class="form-control" value="{{$client->landline}}" placeholder="No Landline Number" disabled   />
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label" for="">Address</label>
                            <div class="position-relative">
                                <input type="text" class="form-control" id="" placeholder="Enter Address Line 1" disabled value="{{$client->address}}"/>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label" for="">Town</label>
                            <div class="position-relative">
                                <input type="text" class="form-control" id="" placeholder="Enter Town" disabled value="{{$client->town}}"/>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label" for="">City/County</label>
                            <div class="position-relative">
                                <input type="text" class="form-control" id="" placeholder="Enter City/County" disabled value="{{$client->city}}"/>
                            </div>
                        </div> 
                        <div class="col-lg-6 mb-3">
                            <label class="form-label" for="">Postcode</label>
                            <div class="position-relative">
                                <input type="number" class="form-control" id="" placeholder="Enter Postcode" disabled value="{{$client->postcode}}"/>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label" for="">Country</label>
                            <div class="position-relative">
                                <input type="text" class="form-control" id="" placeholder="Enter Country"  value="{{$client->country}}" disabled/>
                            </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="form-label" for="">Email Address</label>
                            <div class="position-relative">
                                <input type="email" class="form-control" id="" value="{{$client->email}}" placeholder="Enter Email Address" disabled/>
                            </div>
                        </div>
                        
                        

                        <!-- <div class="col-12">
                            <button class="btn btn-primary" type="button">Submit</button>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header d-flex g-2 justify-content-between align-items-center">
                    <h5 class="mb-0">Registered Cards</h5>
                    <a class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#add-card">Add Card </a>
                    
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table mb-0 align-middle table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>Status</th>
                                    <th>Card</th>
                                    <th>Holder</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>


                                @foreach($cards as $key => $card)

                                <tr>
                                    <th scope="row">

                                            @php 

                                                $now = \Carbon\Carbon::now(); 
                                                $isExpired = $card->expiry < $now;

                                            @endphp

                                            @if ($isExpired)
                                                <span class="badge rounded-pill bg-danger" data-key="t-hot">Card Expired</span> 
                                            @else
                                               
                                                <span class="badge rounded-pill bg-success" data-key="t-hot">Card Valid</span>
                                            @endif
 

                                    </th>
                                    
                                    <td>
                                        <div class="d-flex gap-2">
                                            <img src="assets/images//master_card.svg" width="20" alt="">
                                            {{ $card->number }}
                                        </div>
                                    </td>

                                    <td>{{ $card->holder_name }}</td>

                                    <td>
                                        <!-- <a href="#!" class="font-size-20"> <i class="bx bx-credit-card"></i></a> -->

                                        <div class="dropdown mt-4 mt-sm-0">
                                        <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="true">
                                            <i class="bx bx-dots-horizontal-rounded"></i>
                                        </button>
                                        <div class="dropdown-menu" data-popper-placement="bottom-end">  

                                            <a class="dropdown-item cancel-link" href="{{ route('admin.del_card' , $card->id) }}" onclick="return confirm('Are you sure you want to delete this Card?');" >Delete</a> 
                                        </div>
                                    </div>

                                    </td>
                                </tr>

                                 @endforeach


                                <!-- <tr>
                                    <th scope="row"><span class="badge rounded-pill bg-danger" data-key="t-hot">Card Expired</span></th>
                                    <td>
                                        <div class="d-flex gap-2">
                                            <img src="assets/images//master_card.svg" width="20" alt="">
                                            3742xxxxxxx0123
                                        </div>
                                    </td>
                                    <td>A Percy</td>
                                    <td>
                                        <a href="#!" class="font-size-20"> <i class="bx bx-credit-card"></i></a>
                                    </td>
                                </tr> -->


                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-12">
            <div class="card">
                <h5 class="card-header">Remarks</h5>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table mb-0 align-middle table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Remark</th>
                                    <th>Updated Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">1</th>
                                    <td>{{ $client->remark }}</td>
                                    <td>{{ $client->updated_at }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
            
        </div>
    </div>
</div>


 <!-- for card add -->
 <div class="modal fade" id="add-card" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Add Card</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body"> 
                    <form class="custom-form" id="card-form">
                        @csrf
                        <input type="hidden" value="{{$client->id}}" id="client_id" name="client_id">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label" for="formrow-firstname-input">Card Number</label>
                                    <input type="number" class="form-control" id="cardnumber" name="cardnumber" />
                                    <div class="invalid-feedback" id="cardnumber-error"></div>
                                </div>
                            </div>
                            
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label" for="formrow-firstname-input">Card Holder Name</label>
                                    <input type="text" class="form-control" id="holdername" name="holdername" />
                                    <div class="invalid-feedback" id="holdername-error"></div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label" for="formrow-email-input">Expiry Date</label>
                                    <input type="text" class="form-control flatpicker-input-any" id="expiry" name="expiry" />
                                    <div class="invalid-feedback" id="expiry-error"></div>
                                </div>
                            </div>
                        </div>
                    </form>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary waves-effect waves-light"  style="width: 120px;" data-bs-dismiss="modal">No</button>
                        <button type="button" class="btn btn-primary" id="add-btn" >Add</button>
                    </div>
                </div>
            </div>
        </div>


<!-- for Remark Add -->

<div class="modal fade" id="remark-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Remark</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                     <form class="custom-form" enctype="multipart/form-data" action="{{ route('admin.remark_update', $client->id) }}" method="post">
                    <div class="modal-body"> 
                            @csrf
                            <div class="row">

                                <div class="col-12 mb-4">
                                    <div class="position-relative">
                                        <textarea class="form-control" id="remark" name="remark" rows="5">{{$client->remark}}</textarea>
                                    </div>
                                </div>
                                

                            </div>
                        
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary waves-effect waves-light"  style="width: 120px;" data-bs-dismiss="modal">No</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>

                    </form>
                </div>
            </div>
        </div>

@endsection

@section('specificscripts')
  

<script>
    $(document).ready(function() {
        $('#add-btn').on('click', function(e) {
            e.preventDefault(); // Prevent the default form submission

            // Get the form element and its data
            var form = $('#card-form'); 
            var url = "{{ route('admin.card_store') }}"; // Fixed syntax error
            var data = form.serialize();

            // Send AJAX request
            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                success: function(response) {
                   
                    alert(response.message);

                    window.location.reload();
                    // $('#add-company-modal').modal('hide'); 
                    // form[0].reset();

                },
                error: function(response) {
                    // Check if validation errors are returned
                     if (response.status === 422) {
                        var errors = response.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('#' + key).addClass('is-invalid');
                            $('#' + key + '-error').text(value[0]);
                        });
                    } else {
                        alert('An error occurred. Please try again.');
                    }
                    console.log(response.responseText);
                }
            });
        });
    });
</script>

 

@stop