@extends('User.Layout.App')

@push('css')
    <link href="{{ asset('assets/css/custom/user/your_services.css') }}" rel="stylesheet">
@endpush

@section('breadcrumb')
    <ul class="breadcrumb">
        <li><a href="#">User</a></li>
        <li><a href="#">Your Services</a></li>
        <li>{{$serviceData->service_name}}</li>

    </ul>
@endsection

@section('heading')
    <h3 class="heading">Upload Document</h3>
@endsection
@section('content')
    <form action="{{ url('user/service') }}" method="post" enctype="multipart/form-data" class="mt-3">
        @csrf
        <input type="hidden" name="user_service_id" value="{{$serviceData->uid}}">
        <div class="table-responsive p-2">
            <table class="attachment-table table table-bordered">
                <thead>
                    <th class="text-center" style="width:50px">Sr</th>
                    <th style="width:200px">Document Name</th>
                    <th>Details</th>
                    <th>Status</th>
                    <th class="text-center" style="width:120px">Action</th>
                    <th style="width:300px">Filename</th>
                </thead>
                <tbody>
                                    </tbody>
            </table>
        </div>

        <div class="text-center">
            <a href="{{ url('user/service')}}" class="save-button" style="text-decoration: none">Go Back</a>
            <button type="submit"
                    class="save-button"
                >
                SAVE
            </button>
        </div>
    </form>
@endsection

@push('footer_scripts_after_init')
<script>    
    function displayFileName(fileInputId, fileNameDisplayId) {
        var fileInput = $('#' + fileInputId);
        var fileNameDisplay = $('#' + fileNameDisplayId);

        if (fileInput[0].files.length > 0) {
            fileNameDisplay.html(fileInput[0].files[0].name + ' <button type="button" class="btn btn-danger btn-sm custome-file-name-delete-button"><i class="fas fa-trash" aria-hidden="true"></i></button>');
        }
    }
</script>
@endpush