@extends ('../welcome')
@section ('content')
<div class="card-header">
    <div class="row">
        <div class="col-3">
            <form action="{{route('hideProject', $project->id)}}" method="POST">
                @csrf
                @if(auth()->user()->isAbleTo('projects-update'))
                <a href="{{route('projects.edit', $project->id)}}">
                    <button class="btn btn-square btn-warning" type="button">Edit Project</button>
                </a>
                @endif
                @if(auth()->user()->isAbleTo('phases-create'))
                <a href="{{route('phases.create', 'id='.$project->id)}}">
                    <button class="btn btn-square btn-primary active" type="button">Create Phase</button>
                </a>
                @endif
                @if(auth()->user()->type == 'admin')
                <button type="submit" class="btn btn-{{$project->is_active == 0 ? 'info' : 'danger'}}"
                    title="{{$project->is_active == 0 ? 'unhide' : 'hide'}}">
                    {{$project->is_active == 0 ? 'unhide' : 'hide'}}
                </button>
                @endif
            </form>

            @if(auth()->user()->isAbleTo('projects-delete'))
            <button onClick="clickDeletebutton(this)" title="Delete" class="btn btn-danger" data-id="{{$project->id}}"
                data-toggle="modal" data-target="#projectModals">
                <i class="fa fa-ban"></i>
            </button>
            @endif
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-6">
                <div class=" row">
                    <label class="col-sm-3 col-form-label">Project Name :</label>
                    <label class="col-sm-4 col-form-label">{{ $project->name }} </label>
                </div>
                <div class=" row">
                    <label class="col-sm-3 col-form-label">Description :</label>
                    <label class="col-sm-4 col-form-label">{{ $project->description }} </label>
                </div>
                <div class=" row">
                    <label class="col-sm-3 col-form-label">Active :</label>
                    <label class="col-sm-4 col-form-label">{{ $project->is_active == 0 ? 'non-active' : 'active' }}
                    </label>
                </div>
                <div class=" row">
                    <label class="col-sm-3 col-form-label">Created at :</label>
                    <label class="col-sm-4 col-form-label">{{ $project->created_at }} </label>
                </div>
                <hr>
                <div>
                    <h4>Campaigns</h4>
                    @forelse ($project->campaigns as $campaign)
                    <a href="{{route('campaigns.show', $campaign->id)}}">
                        <label class="">*{{ $campaign->name }}: </label>
                    </a>
                    <label class=""> {{ $campaign->created_at }}</label><br>
                    @empty
                    @endforelse
                </div>
            </div>
            <div class="col-6">
                <div>
                    <h4>Facilities</h4>
                    @foreach ($project->facilities as $facility)
                    <label class="">*{{ $facility->name }} :</label>
                    <label class="col-form-label">{{ $facility->price }} L.E </label><br>
                    @endforeach
                </div>
                <hr>
                <div>
                    <h4>Accessed users</h4>
                    @forelse($project->users as $user)
                    <a href="{{route('users.show', $user->id)}}">
                        <label class="">*{{ $user->name }}</label>
                    </a>
                    @empty
                    @endforelse
                </div>
            </div>
        </div>
    </div>
    <br>
    <!-- Phases -->
    <!-- /.row -->
    @if(auth()->user()->isAbleTo('phases-read'))
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Phases</h3>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <table id="phases" class="table table-bordered table-striped">
                    <thead>
                        <tr style="text-align:center;">
                            <th>ID</th>
                            <th>Name</th>
                            <th>Active</th>
                            <th>Created At</th>
                            <th>Availability</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody style="text-align:center;">
                        @forelse ($phases as $phase)
                        <tr>
                            <td>{{ $phase->id }}</td>
                            <td>
                                <a href="{{ route('phases.show', $phase->id) }}">
                                    {{ $phase->name }}
                                </a>
                            </td>

                            <td>{{ $phase->is_active }}</td>
                            <td>{{ $phase->created_at }}</td>
                            <td>
                                @if(auth()->user()->type == 'admin')
                                <form action="{{ route('hidePhase', $phase->id) }}" method="POST">
                                    @csrf
                                    <button type="submit"
                                        class="btn btn-{{ $phase->is_active == 0 ? 'info' : 'danger' }}"
                                        title="{{ $phase->is_active == 0 ? 'unhide' : 'hide' }}">
                                        {{ $phase->is_active == 0 ? 'unhide' : 'hide' }}
                                    </button>
                                </form>
                                @endif
                            </td>
                            <td style="text-align:center;">
                                @if(auth()->user()->isAbleTo('phases-update'))
                                <a class="btn btn-primary" title="Edit" href="{{ route('phases.edit', $phase->id) }}">
                                    <i class="fa fa-pen"></i>
                                </a>
                                @endif
                                @if(auth()->user()->isAbleTo('phases-delete'))
                                <button onClick="clickDeletebutton(this)" title="Delete" class="btn btn-danger"
                                    data-id="{{$phase->id}}" data-toggle="modal" data-target="#phaseModals">
                                    <i class="fa fa-ban"></i>
                                </button>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <td>No Phases yet</td>
                        @endforelse
                    </tbody>
                </table>
                <div class="modal fade" id="phaseModals" tabindex="-1" role="dialog" aria-labelledby="phaseModals"
                    aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Delete Record</h5>
                            </div>
                            <div class="modal-body">
                                <p>Are you sure to delete this record ?</p>
                            </div>
                            <form class="modal-footer" method="post">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary yes" type="button">Yes</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
    </div>
    @endif
</div>

<div class="modal fade" id="phaseModals" tabindex="-1" role="dialog" aria-labelledby="phaseModals" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Record</h5>
            </div>
            <div class="modal-body">
                <p>Are you sure to delete this record ?</p>
            </div>
            <form class="modal-footer" method="post">
                @csrf
                @method('DELETE')
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary yes" type="button">Yes</button>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="projectModals" tabindex="-1" role="dialog" aria-labelledby="projectModals"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Delete Record</h5>
            </div>
            <div class="modal-body">
                <p>Are you sure to delete this record ?</p>
            </div>
            <form class="modal-footer" method="post">
                @csrf
                @method('DELETE')
                <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary yes" type="button">Yes</button>
            </form>
        </div>
    </div>
</div>
<!-- /.row -->
<script>
$(function() {
    $("#phases").DataTable({
        "responsive": true,
        "lengthChange": false,
        "autoWidth": false,
        "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
    }).buttons().container().appendTo('#phases_wrapper .col-md-6:eq(0)');
    $('#example2').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
    });
});

clickDeletebutton = (e) => {
    const modelId = e.getAttribute("data-id");
    var route = "{{route('projects.destroy',':id')}}";
    route = route.replace(':id', modelId);
    $('#projectModals').find($('form')).attr('action', route);
}

clickDeletebutton = (e) => {
    const modelId = e.getAttribute("data-id");
    var route = "{{route('phases.destroy',':id')}}";
    route = route.replace(':id', modelId);
    $('#phaseModals').find($('form')).attr('action', route);
}
</script>

@endsection