@extends('admin.layouts.layouts')

@section('title', 'Document Signature')

@section('page-css')
    <link href="https://unpkg.com/cropperjs@1.5.13/dist/cropper.min.css" rel="stylesheet">
    <style>
        .select2-container--default .select2-selection--multiple {
            border-radius: 0 !important;
        }

        .select2-container--default .select2-selection--multiple .select2-search__field {
            padding: 9px 24px !important;
        }

        td .viewable {
            width: 100px !important;
        }
    </style>
@endsection

@section('content')
    <div class="page-header">
        <h3 class="page-title">Document Signature</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item" aria-current="page">Document Signature</li>
            </ol>
        </nav>
    </div>

    <div class="container px-0 mb-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Create Signature</h5>
            </div>

            {!! Form::open([
                'route' => 'document-signature.store',
                'method' => 'POST',
                'id' => 'signature-form',
                'class' => 'forms-sample',
                'enctype' => 'multipart/form-data',
            ]) !!}

            @csrf
            {!! Form::hidden('sign_id', '', ['id' => 'sign_id']) !!}

            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('name', 'Name', ['class' => 'form-label']) !!}
                            <span class="text-danger">*</span>
                            {!! Form::text('name', old('name'), [
                                'class' => 'form-control',
                                'placeholder' => 'Enter Name',
                                'data-parsley-required' => true,
                                'data-parsley-required-message' => 'Please enter name.',
                                'data-parsley-errors-container' => '#name_error',
                            ]) !!}
                            <span class="text-danger" id="name_error"></span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('designation', 'Designation', ['class' => 'form-label']) !!}
                            <span class="text-danger">*</span>
                            {!! Form::text('designation', old('designation'), [
                                'class' => 'form-control',
                                'placeholder' => 'Enter Designation',
                                'data-parsley-required' => true,
                                'data-parsley-required-message' => 'Please enter designation.',
                                'data-parsley-errors-container' => '#designation_error',
                            ]) !!}
                            <span class="text-danger" id="designation_error"></span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('documents', 'Documents', ['class' => 'form-label']) !!}
                            <span class="text-danger">*</span>
                            {!! Form::select('documents[]', $documents, '', [
                                'id' => 'documents',
                                'class' => 'form-control select2',
                                'multiple' => 'multiple',
                                'data-parsley-required' => true,
                                'data-parsley-required-message' => 'Please select document.',
                                'data-parsley-errors-container' => '#documents_error',
                            ]) !!}
                            <span class="text-danger" id="documents_error"></span>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('signature', 'Signature', ['class' => 'form-label']) !!}
                            {!! Form::file('signature', [
                                'id' => 'signature',
                                'class' => 'form-control',
                                'accept' => 'image/jpeg,image/png,image/jpg',
                                'data-parsley-max-file-size' => '3',
                                'data-parsley-file-extension' => 'jpg,jpeg,png',
                                'data-parsley-errors-container' => '#signature_error',
                            ]) !!}
                            <small class="text-muted d-block mt-1">(Allowed file types: JPG, JPEG, PNG, Max:
                                3MB)</small>
                        </div>
                        <span class="text-danger" id="signature_error"></span>
                    </div>
                    <div class="col-md-4">
                        <img id="preview_photo" src="{{ asset('assets/images/noimage/no-image.jpeg') }}"
                            alt="Profile Preview" class="img-thumbnail viewable"
                            style="width: 180px; height: 49px; object-fit: contain; margin-top: 21px; border-radius: 0;">
                    </div>
                </div>
            </div>
            <div class="card-footer">
                {!! Form::button('Create', [
                    'type' => 'submit',
                    'class' => 'btn btn-primary mr-2',
                    'id' => 'create-btn',
                ]) !!}
            </div>

            {{ Form::close() }}
        </div>
    </div>

    <div class="container px-0">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Document Signature List</h5>
            </div>
            <div class="card-body">
                @if ($signatures->isEmpty())
                    <p style="text-align: center; font-weight: bold;">Records not found!</p>
                @else
                    <div class="table-responsive">
                        <table class="table table-hover" id="signatures-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Designation</th>
                                    <th>Documents</th>
                                    <th>Signature</th>
                                    <th>Created</th>
                                    <th>Show Sign?</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($signatures as $signature)
                                    @php
                                        $docs = json_decode($signature->documents);
                                    @endphp
                                    <tr>
                                        <td>{{ $signature->name ?? '-' }}</td>
                                        <td>{{ $signature->designation ?? '-' }}</td>
                                        <td>
                                            @foreach ($docs as $doc)
                                                <span class="badge badge-pill badge-primary mr-1">{{ $doc }}</span>
                                            @endforeach
                                        </td>
                                        <td>
                                            @if (isset($signature->signature) &&
                                                    !empty($signature->signature) &&
                                                    file_exists(public_path('storage/' . $signature->signature)))
                                                <img src="{{ asset('storage/' . $signature->signature) }}" alt="Pan Card"
                                                    class="rounded viewable">
                                            @else
                                                <span class="text-muted small">Not Found</span>
                                            @endif
                                        </td>
                                        <td>
                                            {{ $signature->created_at->format('d-m-Y') }}
                                        </td>
                                        <td>
                                            <button type="button"
                                                class="btn btn-toggle {{ $signature->show_sign == 1 ? 'active' : '' }} show-sign-btn"
                                                data-toggle="button" aria-pressed="false" autocomplete="off"
                                                data-id="{{ $signature->id }}" data-status="{{ $signature->show_sign }}">
                                                <div class="handle"></div>
                                            </button>
                                        </td>
                                        <td>
                                            <a href="javascript:void(0);" class="btn btn-sm btn-icon btn-primary btn-edit"
                                                data-id="{{ $signature->id }}" data-name="{{ $signature->name }}"
                                                data-designation="{{ $signature->designation }}"
                                                data-documents="{{ $signature->documents }}"
                                                data-signature="{{ $signature->signature }}">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        let documents = @json($documents);
        let storeRoute = "{{ route('document-signature.store') }}";
        let assetPath = "{{ asset('/') }}";
        let showSignRoute = "{{ route('document-signature.show-sign') }}";
    </script>
    <script src="https://unpkg.com/cropperjs@1.5.13/dist/cropper.min.js"></script>
    <script src="{{ asset('assets/js/admin/document_signature.js') }}"></script>
@endsection