@extends('layouts.contractor-app')
@section('content')

    <div class="col-md-9 layout editprof">
        <h2 class="title">Edit Details</h2>
        <div class="recentTable editProfile editRes">

            <div class="row align-items-start">
                <div class="col-auto ml-auto">
                    <a class="btn btn-danger delete" data-toggle="modal" data-target="#deleteCrewModal">Delete</a>
                </div>
            </div>


            <div class="row align-items-start">
                <div class="col-md-2">
                    <label>Crew Details*</label>
                </div>
            </div>

            <form class="editForm" action="{{route('contractor.crew.edit',$crew->id)}}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="row align-items-start">
                    <div class="col-md-2">
                        <label>Image*</label>
                    </div>
                    <div class="col-md-10">
                        <input type="file" name="image" id="imageInput" accept="image/*" onchange="previewImage()">
                        <img src="{{ asset('profile_images/'.($crew->image ?: 'noimage.jpg')) }}" alt="Image Preview" id="imagePreview" style="max-width: 100%; max-height: 200px;">
                        @error('email')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="row align-items-start">
                    <div class="col-md-2">
                        <label>Name*</label>
                    </div>
                    <div class="col-md-10">
                        <input type="text" name="name" placeholder="Name" value="{{$crew->name ?? ''}}" style="color: black">
                        @error('name')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="row align-items-start">
                    <div class="col-md-2">
                        <label>Email*</label>
                    </div>
                    <div class="col-md-10">
                        <input type="email" name="email" placeholder="Email" value="{{$crew->email ?? ''}}" style="color: black">
                        @error('email')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="row align-items-start">
                    <div class="col-md-2">
                        <label>Phone*</label>
                    </div>
                    <div class="col-md-10">
                        <input type="tel" name="phone" placeholder="Email" value="{{$crew->phone ?? ''}}" style="color: black">
                        @error('phone')
                        <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
{{--                <div class="row align-items-start">--}}
{{--                    <div class="col-md-2">--}}
{{--                        <label>Time*</label>--}}
{{--                    </div>--}}
{{--                    <div class="col-md-10">--}}
{{--                        <input type="time" name="time" placeholder="Email" value="{{$crew->time ?? ''}}" style="color: black">--}}
{{--                        @error('time')--}}
{{--                        <span class="text-danger">{{ $message }}</span>--}}
{{--                        @enderror--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="row align-items-start">--}}
{{--                    <div class="col-md-2">--}}
{{--                        <label>Date*</label>--}}
{{--                    </div>--}}
{{--                    <div class="col-md-10">--}}
{{--                        <input type="date" name="date" placeholder="Email" value="{{$crew->date ?? ''}}" style="color: black">--}}
{{--                        @error('date')--}}
{{--                        <span class="text-danger">{{ $message }}</span>--}}
{{--                        @enderror--}}
{{--                    </div>--}}
{{--                </div>--}}
                <div class="col-md-10">
                    <button class="themeBtn">Save Details</button>
                </div>
            </form>
        </div>
    </div>



    <div class="modal fade" id="deleteCrewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirm Deletion</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this crew member?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a class="btn btn-danger" href="{{route('contractor.crew.delete',$crew->id)}}" id="confirmDelete">Delete</a>
                </div>
            </div>
        </div>
    </div>

@endsection
<script>
    function previewImage() {
        const input = document.getElementById('imageInput');
        const preview = document.getElementById('imagePreview');

        if (input.files && input.files[0]) {
            const reader = new FileReader();

            reader.onload = function (e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $(document).ready(function () {
        // Handle the click event of the "Delete" button
        $('.delete').click(function () {
            // Get the crew ID or other relevant data to pass to the delete action
            var crewId = $(this).data('crew-id'); // Replace with the actual data attribute

            // Show the modal
            $('#deleteCrewModal').modal('show');
        });
    });
</script>