@extends('layouts.master')

@section('content')

<div class="container-fluid">
    
    <div class="row justify-content-center">
        <div class="col-md-12">
            @if(Session::has('success'))
                <div class="alert alert-success alert-dismissible fade show text-center" role="alert">
                    {{Session::get('success')}}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            @if(Session::has('error'))
                <div class="alert alert-danger alert-dismissible fade show text-center" role="alert">
                    {{Session::get('error')}}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            <div class="card">
                <div class="card-header text-white bg-primary">{{ __('Visitor Special Pass') }}</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('store.special_pass') }}" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="form-group row">
                                <label for="photo" class="col-md-4 col-form-label text-md-right">{{ __('Photo') }}</label>
    
                                <div class="col-md-6">
                                    <div id="my_camera"></div>
                                    <div id="results"> </div>
                                    <input type="button" class="btn btn-primary btn-sm" value="Take Snapshot" onClick="take_snapshot()">
                                    <input type="hidden" name="photo" class="image-tag">
                                    <!--<input id="photo" type="file" class="form-control @error('photo') is-invalid @enderror" name="photo" value="{{ old('photo') }}" required autocomplete="photo" autofocus>-->
    
                                    @error('photo')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                        <div class="form-group row">
                            <label for="f_name" class="col-md-2 col-form-label text-md-right">{{ __('First Name') }}</label>

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

                                @error('f_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            
                            <label for="m_name" class="col-md-2 col-form-label text-md-right">{{ __('Middle Name') }}</label>

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

                                @error('m_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            
                        </div>
                        
                        <div class="form-group row">
                            <label for="l_name" class="col-md-2 col-form-label text-md-right">{{ __('Last Name') }}</label>

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

                                @error('l_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            
                             <label for="age" class="col-md-2 col-form-label text-md-right">{{ __('Age') }}</label>

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

                                @error('age')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            
                            <!--<label for="photo" class="col-md-2 col-form-label text-md-right">{{ __('Photo') }}</label>-->

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

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


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

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

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            
                            <label for="address" class="col-md-2 col-form-label text-md-right">{{ __('Address') }}</label>

                            <div class="col-md-4">
                                <textarea name="address" id="address" class="form-control @error('address') is-invalid @enderror" value="{{ old('address') }}" cols="10" rows="2" required></textarea>

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

                        <div class="form-group row">
                            <label for="mobile" class="col-md-2 col-form-label text-md-right">{{ __('Mobile Number') }}</label>

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

                                @error('mobile')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            
                            <label for="organization" class="col-md-2 col-form-label text-md-right">{{ __('Organization') }}</label>

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

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

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

                            <div class="col-md-4">
                                <select name="visiting_dept" id="visiting_dept" class="form-control @error('visiting_dept') is-invalid @enderror" required autocomplete="visiting_dept">
                                    <option value="">Select Department</option>
                                    @foreach($department as $dept)
                                        <option value="{{$dept->name}}">{{$dept->name}}</option>
                                    @endforeach
                                </select>

                                @error('visiting_dept')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            
                            <label for="made_for" class="col-md-2 col-form-label text-md-right">{{ __('Pass Made For') }}</label>

                            <div class="col-md-4">
                                <select name="made_for" id="made_for" class="form-control @error('made_for') is-invalid @enderror" required autocomplete="made_for">
                                    <option value="">Select Type</option>
                                    @foreach($Passfor as $pass)
                                        <option value="{{$pass->id}}">{{$pass->name}}</option>
                                    @endforeach
                                </select>

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

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

                            <div class="col-md-4">
                                <select name="validity" id="validity" class="form-control @error('validity') is-invalid @enderror" required autocomplete="validity">
                                    <option value="">Select Pass Validity</option>
                                    @foreach($PassValidity as $pass)
                                        <option value="{{$pass->no_of_days}}">{{$pass->name}}</option>
                                    @endforeach
                                </select>

                                @error('validity')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            
                            <label for="valid_till" class="col-md-2 col-form-label text-md-right">{{ __('Valid Till Date') }}</label>

                            <div class="col-md-4">
                                <!-- Read-only field to display "Valid Till" date -->
                                <input type="text" name="valid_till" class="form-control" id="valid_till_date" readonly>
                            </div>
                            
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Submit') }}
                                </button>
                                <a href="{{route('specialpass')}}" class="btn btn-primary">Cancel</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js" defer></script>
<script>
    $(document).ready(function () {
        $('#validity').on('change', function () {
            var selectedDays = parseInt($(this).val());
            if (!isNaN(selectedDays)) {
                var currentDate = new Date();
                var validTillDate = new Date(currentDate.getTime() + (selectedDays * 24 * 60 * 60 * 1000));
                var formattedDate = formatDate(validTillDate); // Format the date
                $('#valid_till_date').val(formattedDate);
            } else {
                $('#valid_till_date').val('');
            }
        });
 
        // Function to format the date as 'YYYY-MM-DD'
        function formatDate(date) {
            var year = date.getFullYear();
            var month = (date.getMonth() + 1).toString().padStart(2, '0'); // Add leading zero if needed
            var day = date.getDate().toString().padStart(2, '0'); // Add leading zero if needed
            return day + '-' + month + '-' + year;
        }
    });
 </script>
 
<script language="JavaScript">
$(document).ready(function() {
    Webcam.set({
        width: 250,
        height: 250,
        image_format: 'jpeg',
        jpeg_quality: 100
    });
});

function attachCamera() {
    Webcam.attach('#my_camera');
}

function take_snapshot() {
    Webcam.snap(function(data_uri) {
        $(".image-tag").val(data_uri);
        document.getElementById('results').innerHTML = '<img src="' + data_uri + '"/>';
        // $("#my_camera").css("display", "none");
    });
}

// Call attachCamera to initialize the camera when the document is ready
$(document).ready(function() {
    attachCamera();
});
</script>
 

@endsection